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

Question

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

我找到了很多关于如何创建 navigation/side 导航来为 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 度动画并添加一个新功能，然后滚动到网页的最顶部。

Answer 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);

});

这里是一个fiddle，它使用背景渐变来帮助演示滚动效果：https://jsfiddle.net/yotaajop/1/

Answer 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
});

Answer 3

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

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

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

Single Button to scrollTop(); though sections on webpage

javascript

jquery

scrolltop

jquery-animate