Javascript 如何创建页面滚动按钮，如nexus5网站

我想创建一个类似nexus5网站的滚动页面

i、 一个按钮就可以完成所有任务。点击一个按钮，它会把你带到不同的部分，当它到达最后一个ID时，它会一直向上滚动

JS

HTML

---

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

每次您想要滚动到下一个元素时，只需使用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;
      }
 });

---

你要求的工作太多了！

<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>

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

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