Simple ‘Smooth Scroll’ with jQuery

Have you ever been to a website, clicked on an internal link (link on a page that goes to a different location on the same page), and the page jumped to the location?

A much cleaner, more captivating way to go about internal links is creating a smooth scroll effect so when the link is clicked, the page slides to the specified content instead of jumping to it. This seems at first glance to be complicated, but in reality, it is a very simple technique and a good way to push your design from basic and static content to a place where you can begin to enhance the user experience (UX).

To view this effect in action, visit jhauge.com and click on the ‘Let’s Talk’ link!

The first step we need to take is calling the correct version of jQuery into our page. We are going to use a google .api as google has hosted jQuery pages on their site. This is very easy to do:

<head>
<!-- HEADER CONTENT GOES HERE -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

A call to jQuery can go in between your < head > < /head > tags or at the bottom of your < body > tag.  For this specific install, we will be putting it in the < head > tags as this effect does not include much script to implement.

Underneath our call for google’s jQuery .api, we will write some custom script to tell our page what part of the linked script we need to use. In order to write script on a HTML page, you must wrap your custom code in <script> or even better <script type=”text/javascript”> tags.

We start by calling our function and giving our function a class. The class is applied to links that we want to perform the effect as I will demonstrate later:

<script type="text/javascript">
      $(document).ready(function(){
        $(".scroll").click(function(event){
         event.preventDefault();

We then calculate the browser size and the proximity to the destination specified in each link using and if/else statement:

var dest=0;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }

Lastly, we set the jQuery effect and the speed at which we want the scroll to move and then we close our script tag.

$('html,body').animate({scrollTop:dest}, 1000,'swing');
     });
     });
    </script>

The code in your header when complete should appear like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script>
      $(document).ready(function(){
        $(".scroll").click(function(event){
         event.preventDefault();
         var dest=0;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }
         $('html,body').animate({scrollTop:dest}, 1000,'swing');
     });
     });
    </script>

Our last step is to link to an internal link in our HTML. In order to make an internal link, we set a specific ID to a <div>, <h1>, <p>, basically any tag that you would like to appear at the top of the browser screen when the link is clicked. This looks like this:

<div ID="blue">

Then, we set a link that goes to that ID by using a poundsign (#) which symbolizes a CSS ID, followed by the ID name like this:

<a href="#blue"> I am link text"</a>

This link when clicked, will now jump to the location specified by the selected ID. The only other thing we need to do in order to get the jQuery to be called and the page to smooth scroll to the link location is to call the class in the link tag. Your ending HTML should look like this:

<a href="#blue" class="scroll"> I am link text"</a>

Now when you click your link, your page should scroll smoothly to the specified location on your page.

This effect will enhance your page and help you to begin designing with the user experience in mind instead of just as a static web designer. Thanks for stopping by!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s