How to create a smooth scroll down menu with jQuery.

This article was written by in August 20, 2013, & may not be posted on other sites!
Original source url for this article: How to create a smooth scroll down menu with jQuery.

How to create a scroll down menu with jquery.
The one page modern design often requires a smooth scroll down menu. You can easily create one using a little bit of jQuery combined with your html/css code. This is how create a scroll down menu with jQuery:

  1. Create the different sections on your html-page. Make sure every section has its own id. something like this:
    Create sections the old way using the div-element:
    <div id="news-section">
    <p>some content for the news</p>
    </div>
    <div id="about-section">
    <p>some content about us</p>
    </div>
     

    OR create sections using HTML 5 and the section-element:
    <section id="news-section">
    <p>some content for the news</p>
    </section>
    <section id="about-section">
    <p>some content about us</p>
    </section>

  2. Create a simple menu in your html-file. Every a-link should have the same class in this case .anchorlink. Link every link to each section calling the #id of each section, something like this:
    Create a menu the old way:

    <ul>
    <li><a class="anchorlink" href="#news-section">News</a></li>
    <li><a class="anchorlink" href="#about-section">About Us</a></li>
    </ul>
     

    OR Create a menu in HTML 5:
    <nav>
    <a class="anchorlink" href="#news-section">News</a>
    <a class="anchorlink" href="#about-section">About Us</a>
    </nav>

  3. When you have your html-code set up it is time to add the jQuery-library. You can load this library externaly using this code before the closing </head> element in your html-file:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    This is a link to the latest jQuery library provided by http://jquery.com/.
    Another way is to download the JQuery library and load it localy on your webserver, like this:
    <script src="my-folder/jquery.min.js"></script>
    Download your own jQuery library here: http://jquery.com/download/
  4. When you have your html-code set up it is time to add some simple javascript / jQuery. You can do this with an external js-file or directly into your html-document using the script-tag like this:
    <script>
    //anchor meny scroll
    $(".anchorlink").click(function(event){
    $('html,body').animate({scrollTop:jQuery(this.hash).offset().top}, 500);
    event.preventDefault();
    });
    </script>

    Make sure that you put your jQuery code after the html-code but just before the closing body-tag or if you use an external js-file, use the $(document).ready – function. This is to prevent the jQuery-code from running before the actual html-code is ready. The number 500 indicates the speed of the scroll. Change this to 1500 if the menu is scrolling to fast. 1000 = 1 second.

 

Ok, here follows the full source code to get you started on your scroll down menu jquery. Just copy and paste this code below into an empty file and save it as index.html. In this file I have also included the basic html tags such as <html> and <head>  . The <style> tags provide some styling.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<style>
section{
min-height: 500px;
padding-top: 50px;
}
nav{
position: fixed;
background-color: #eaeaea;
height: 30px;
}
#about-section{
background-color: #dceee3;
}
</style>

<nav>
<a class="anchorlink" href="#news-section">News</a> |
<a class="anchorlink" href="#about-section">About Us</a>
<a class="anchorlink" href="#contact-section">Contact</a>
</nav>



<section id="news-section">
<p>some content for the news</p>
</section>
<section id="about-section">
<p>some content about us</p>
</section>
<section id="contact-section">
<p>some content about us</p>
</section>



<script>
//anchor meny scroll
$('.anchorlink').click(function(event){
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
event.preventDefault();
});
</script>


</body>
</html>

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *