单个按钮到 scrollTop();虽然网页上的部分答案

【问题标题】：Single Button to scrollTop(); though sections on webpage单个按钮到 scrollTop();虽然网页上的部分
【发布时间】：2015-12-11 03:49:32
【问题描述】：

我有一个网页被分成不同的部分。

我遇到了很多关于如何创建导航/侧边导航以动画化 html 正文的帮助和教程，以便在单击按钮后动画并滚动到 div 的顶部。

我还没有找到一种将所有功能组合成一个漂亮紧凑按钮的方法。（我在想一个箭头）

html 看起来像这样

<div class="section" id="section-one">
</div>
<div class="section" id="section-two">
</div>
<div class="section" id="section-three">
</div>
<div class="section" id="section-four">
</div>
<div class="section" id="section-five">
</div>
<span class="arrow">&uarr;</span>

Css 会有点像这样

.section{
  height:800px;
  width:100%;
  display:block;
  position:relative;
}
.arrow{
  display:block;
  position:fixed;
  top:25px;
  right:25px;
  transition: opacity 0.5s, transform 1s;
  transform: rotate(180deg);
  -webkit-transition:opacity 0.5s, transform 1s;
  -webkit-transform:rotate(180deg);
}

.arrow.is-up{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

我希望能够单击箭头并一个接一个地滚动到每个部分。然后一旦它在最后一部分 section-five 我可以 addClass('is-up'); 将动画箭头 180 度并添加一个新功能，然后将滚动到网页的最顶部。

【问题讨论】：

标签： javascript jquery jquery-animate scrolltop

【解决方案1】：

// get the offset of your '.section' container
var bodyOffset = $('body').offset().top;

// listen for click events
$('.arrow').on('click', function(){

    // count sections and assume that current section is the first section
    var sectionCount = $('.section').length;
    var currentSection = 0;

    // iterate thru elements to determine what section you are in
    for(var i = 0; i < sectionCount; i++){
        var currentScrollPosition = $(document).scrollTop();
        var thisSectionOffset = $(".section").eq(i).offset().top - bodyOffset;
        if(currentScrollPosition >= thisSectionOffset){
            currentSection = i;
        }
    }

    // determine what the new section should be
    var newSection = (currentSection+1 > sectionCount-1) ? 0 : currentSection+1;

    // animate arrow
    if(newSection == sectionCount-1){
        $('.arrow').addClass('is-up')
    } else {
        $('.arrow').removeClass('is-up')        
    }

    // scroll to the new section
    $('html, body').animate({
        scrollTop: $(".section").eq(newSection).offset().top
    }, 400);

});

这是一个使用背景渐变来帮助演示滚动效果的小提琴：https://jsfiddle.net/yotaajop/1/

【讨论】：

感谢您的回复，抱歉回复延迟。你已经为我提供了我正在寻找的东西，也感谢整个代码的解释。谢谢

【解决方案2】：

https://jsfiddle.net/h4ja54uh/3/

单击箭头时，确定哪个部分是下一部分并动画滚动到它。如果我们在最后一部分，请翻转箭头。如果没有下一节，请返回顶部。

$('.arrow').click(function() {
    $(document.body).animate({
        scrollTop: (function() {
            // Get the next section (top of section is below current scroll)
            var $next = $('.section').filter(function(i, e) {
                return $(document.body).scrollTop() < $(e).offset().top;
            });

            // Reset the arrow
            $('.arrow').removeClass('is-up');

            // See how many sections we have left
            switch ($next.length) {
                // We're past the last section, go to top.
                case 0:
                    return $('.section').first().offset().top;
                // Last section, flip that arrow!
                case 1:
                    $('.arrow').addClass('is-up');
                    // Falls through on purpose.
                    // We flip the arrow, but we still want to scroll.
                // Scroll to next section.
                default:
                    return $next.first().offset().top;
            }
        })()
    });
});

$(document.body).animate({
    scrollTop: $('.section').first().offset().top
});

【讨论】：

感谢您的回复，抱歉回复延迟。你已经为我提供了我正在寻找的东西，正如你所看到的，我的问题有两个答案，答案之间是否有很大差异，因为一个比另一个更适合，还是？再次感谢您的帮助

【解决方案3】：

如果您要拥有全屏页面，您是否考虑使用我的 fullpage.js 库？

该插件提供了许多功能，您可以在其中一个来制作您的按钮moveSectionDown 或moveSectionUp。

【讨论】：