javascript - 向下滚动平滑

Question

我正在尝试建立一个单页网站，但我需要网站像缓慢向下滚动一样平滑地向下滚动。我需要使用特殊的标题或函数吗？谢谢!我当前的代码如下所示:

<section id="section01" style="width: 100%; height: 80%">
    <h1>Scroll Down Button #1</h1>
    <a href="#section02">Scroll</a>
</section>
<section id="section02" style="width: 100%; height: 100%">
    <h1>Scroll Down Button #2</h1>
    <a href="#section01">Scroll</a>
</section>

Answer 1

jQuery animate()很适合这个。以下片段:

// Select all links with hashes
$('a[href*=#]:not([href=#])').click(function() {
  // On-page links
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') ||
    location.hostname == this.hostname) {
    // Figure out element to scroll to
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    // Does a scroll target exist? if so, animate
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      //Prevent default
      return false;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section01" style="width: 100%; height: 80%">
  <h1>Scroll Down Button #1</h1>
  <a href="#section02">Scroll</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! lorem</p>
</section>
<section id="section02" style="width: 100%; height: 100%">
  <h1>Scroll Down Button #2</h1>
  <a href="#section01">Scroll</a>
</section>