Scroll to page sections with

Nowadays, we are moving to single-page websites, and for that reason, it’s becoming more and more popular to use scrolling as a method of navigation.

Using the below small JS script, you can easily scroll to the appropriate section of your page.
But before that, you have to set your navigation links as below.

href="#section-id'.

Here is an example of the HTML code of a website.

<nav>
    <a href="#about-us">About Us</a>
    <a href="#contact-form">Contact Form</a>
</nav>

<div id="about-us">Learn About Us</div>
<div id="contact-form">Contact Form section</div>

Now, this is the JS code that you have to use on the header or footer section of your website.

//Scroll to ID on click?>

<script type="text/javascript">
    $("a[href^='#']").click(function(e) {
      e.preventDefault();
      var position = $($(this).attr("href")).offset().top /*-260*/; //offset
      $("body, html").animate({
        scrollTop: position
      } /* speed */ );
    });
  </script>

That’s it. You can also offset the position of the navigation scroll by editing the //offset section on the JS script.

Enjoy! 🙂