Smooth Scrolling Page With jQuery

Posted under :
Download the script Check the demo

In one page websites like in long pages content we need to scroll a lot manually or using the menu, in this code we will build a smooth scrolling with a menu buttons and elevator buttons to to go up using jQuery. Take a look on the demo.

We dont have much to do, just some lines and they are more easy then you think :)

So like the example in the demo, we have the button that take us to a content more down in the page.
Things is simple in the href attribute we have the id of the target of where we want the link to take us.
The link

<a href="#target1">Paragraph One</a>

The target

<h1 id="target1">This is The Paragraph One</h1>

Now, we will add the smooth animated scroll, using this couple of lines, the script will detect the position of the target and when pressing the menu link the page scroll until that position

$('a[href^="#"]').click(function(h){
     h.preventDefault();
     var target = this.hash;
     $("body").stop().animate({
         "scrollTop": $(target).offset().top
     }, 1200);
});

The next step is adding an elevator button to make easy to come back to the top, its much useful with long pages.
the button is a div with “position : fixed” and placed in the bottom with “bottom: 40px and right: 40px” then we hide it with “display:none” cause we don’t need to see it when first opening the page and we are in the top.

<div class="go-up"></div>

Now, this script will detect how much we are scrolling and show the button when we scrolled for more than 500px, and hide it again if its less.

$(window).scroll(function() {
   if($(window).scrollTop() > 500){
       $('.go-up').fadeIn();
   }else{
       $('.go-up').fadeOut();
   }
});

The last thing is, scrolling the page to the top when clicking on the button, this script will do it for you 😉

$('.go-up').click(function(){
    $("body").stop().animate({
        "scrollTop" : 0
    }, 1200);
});

this is it! Download the demo package, and integrate it to your website,
Peace <3



Be notified for new scripts