Skywalker30 Skywalker30 - 2 years ago 90
Javascript Question

Scroll Down Smooth

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>

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download