向下滚动光滑

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>

Answer 2

有一个小的jQuery片段，您可以用来通过页面链接顺畅地滚动。它在内部滚动时使用animate。

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 adipiscing elit. Aenean ac ornare risus, et pretium nisi. Fusce justo lectus, pharetra eget pellentesque sed, blandit quis mi. Praesent scelerisque mollis interdum. Nunc et eleifend lacus. Nam nunc risus, hendrerit
    in tempor sed, fermentum id mauris. Quisque lacus libero, auctor ac libero vitae, auctor faucibus nunc. Aliquam vitae orci non tellus rutrum varius. Praesent facilisis egestas lectus vestibulum tristique. Fusce eleifend libero nec justo pretium mollis.
    Duis eu finibus erat, eget ornare velit. Sed mattis interdum elit eu auctor. Vestibulum sagittis malesuada arcu elementum maximus. Mauris tristique, leo varius rhoncus consectetur, arcu diam faucibus nisl, lobortis dapibus diam elit at orci. In fermentum
    est odio, ut accumsan est aliquam at. Nunc rutrum mi et sem sagittis lobortis. Nulla ac velit at libero ultrices placerat vitae eu mi. Nullam nec pharetra elit. Pellentesque magna metus, lacinia vitae sapien at, tempor tempus erat. In pulvinar elit
    eu justo suscipit, ac vestibulum lorem scelerisque. Aliquam laoreet at augue at faucibus. Proin libero urna, pellentesque ac varius nec, vulputate sollicitudin ipsum. Maecenas et nibh a orci porttitor faucibus id quis tortor. Donec faucibus leo tellus,
    eget lacinia justo hendrerit in. Etiam egestas orci ut nulla fringilla vulputate. Donec id nunc ut lacus ornare dapibus. Integer rhoncus arcu ac maximus rutrum. Duis sed dui sed mauris accumsan ultricies. Aliquam hendrerit lorem ac mauris tristique
    tincidunt. Phasellus pulvinar nibh a augue pellentesque, in interdum elit ultricies. Donec aliquet elit a aliquam eleifend. Suspendisse a sodales neque, sed tempor mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas. Aliquam et porta neque, quis vulputate quam. Phasellus placerat accumsan diam, sit amet mollis quam rhoncus sit amet. Donec vel dui leo. Ut feugiat enim metus, sit amet ullamcorper quam feugiat ut. Aliquam euismod mauris porttitor turpis
    commodo, at pharetra odio imperdiet. Vivamus cursus semper lobortis. Cras non ipsum luctus ligula venenatis feugiat egestas vitae metus. Morbi dignissim hendrerit maximus. Maecenas diam eros, pharetra ut tristique quis, vulputate nec lectus. Curabitur
    euismod aliquet nulla, et eleifend est semper ac. Pellentesque hendrerit mollis lectus, sed condimentum quam tempus non. Mauris efficitur arcu a nisl consequat scelerisque. Nulla facilisi. Proin bibendum placerat finibus. Integer gravida magna vitae
    tincidunt facilisis. Donec ac lorem metus. Sed eros diam, blandit sed malesuada vel, aliquam at velit. Ut risus quam, maximus id quam ut, dictum posuere est. Nunc vitae suscipit neque. Sed elit urna, sodales eget nisi porta, convallis ullamcorper
    nibh. Praesent maximus, elit id ullamcorper posuere, felis leo bibendum nibh, eget placerat neque tellus nec erat. Sed porttitor augue nec ex mattis tincidunt. Nunc consectetur imperdiet ligula eu dapibus. Morbi gravida lacus ut lobortis vulputate.
    Aliquam ut interdum turpis. Vestibulum sit amet augue gravida tortor ultrices commodo. Aliquam mauris nisi, egestas vitae leo tincidunt, tempor efficitur risus. Donec tortor lorem, congue in nunc vitae, lacinia fringilla mi. Pellentesque finibus nibh
    vitae facilisis suscipit. Duis lobortis mollis purus vel vehicula. Etiam tristique mi mi, ut luctus tellus semper sed. Duis aliquam nibh nec dapibus facilisis. Morbi ultricies faucibus quam, facilisis tincidunt mi consectetur quis. Proin pharetra
    risus maximus eros imperdiet posuere. Donec pharetra lorem at dui tempor, vitae tempor diam aliquet.</p>
</section>
<section id="section02" style="width: 100%; height: 100%">
  <h1>Scroll Down Button #2</h1>
  <a href="#section01">Scroll</a>
</section>