Scroll Down Smooth

Question

I am trying to build a one-page website but, I need the site to scroll down smooth as in scroll down slowly.
Do i need to use special headers or functions?
thanks!
My current code looks like this:

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

jQuery animate() plays nice for this. Snippet below:

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

Scroll Down Smooth

Sign up