javascript - 如何创建像nexus5网站那样的页面滚动按钮

Question

我想创建滚动到像 nexus5 网站这样的部分 https://www.google.com/nexus/5/

即一键搞定。单击一个按钮，它会将您带到不同的部分，当它到达最后一个 ID 时，它会一直向上滚动。

JS

if(window.location.hash !=""){

    var scrollIdPrev = "#"+$(""+ window.location.hash +"").prev(".slide").attr("id")+"";
        var scrollIdNext = "#"+$(""+ window.location.hash +"").next(".slide").attr("id")+"";


 $('html, body').animate({
        scrollTop: $(""+window.location.hash+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".previous").attr("data-target",scrollIdPrev);
        $(".next").attr("data-target",scrollIdNext);
    });    
}

$('.next').click(function(){

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").next(".slide").attr("id")+"";


    $('html, body').animate({
        scrollTop: $(""+scrollId+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".previous").attr("data-target",scrollId);
        $(".next").attr("data-target",window.location.hash);
    });
});

$('.previous').click(function(){

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").prev(".slide").attr("id")+"";

    $('html, body').animate({
        scrollTop: $(""+scrollId+"").offset().top
    }, 2000,function(){
        window.location.href=scrollId;
        $(".next").attr("data-target",scrollId);
        $(".previous").attr("data-target",window.location.hash);
    });   
});

HTML

<div class="move">
    <div class="previous" data-target="#one">UP</div>
    <div class="next" data-target="#one">DOWN</div>
</div>
<section class="slide" id="one">First</section>
<section class="slide" id="two">Second</section>
<section class="slide" id="three">Third</section>
<section class="slide" id="four">Fourth</section>

CSS

section{
    height: 400px;
    border: 1px solid black;
}

.move{
    position: fixed;
    bottom: 0;
    right: 0;
}
.previous, .next
{
    background: red;
    height: 20px;
    width: 70px;
    margin-bottom: 5px;
    cursor: pointer;
}

Fiddle

我实现了一些功能，但不是全部。

Answer 1

每次您想滚动到下一个元素时，只需使用 scrollIntoView() 函数即可。

只要有一个你想去的元素数组，然后把指针保存在一个全局变量中。

 window.scroll=0;
 window.navigationpoints=['id1','id2','id3'];
 $('.next').click(function(){
      if(window.scroll<window.navigationpoints.length){
           document.getElementById(window.navigationpoints[window.scroll]).scrollIntoView();
           window.scroll++;
      }else {
             document.getElementById(window.navigationpoints[0]).scrollIntoView();
             window.scroll=1;
      }
 });