Smoothly Scroll To An Element

First Method Using ID’s

<a href="#div1">Go To Div 1</a>

<div id="div1"></div>

$('a[href^="#"]').on('click', function(event) {
    var target = $( $(this).attr('href') );
    if( target.length ) {
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);


Second Method Using Classes

<a href="#" onClick="goToScroll('specificEle')">Go To Div that have class name specficEle</a>

<div class="specificEle"></div>

function goToScroll(e){
    $('html, body').animate({
        scrollTop: $("."+e).offset().top
    }, 1000);


See It In Action


4 thoughts on “Smoothly Scroll To An Element

    1. Second Function work perfectly there is some fiddle problem to render function

      and what you have edit is not different from the function given above

      function goToScroll(e){
      var t = $(“.”+e); // you have added this line but there is no need of this
      $(‘html, body’).animate({
      scrollTop: $(“.”+e).offset().top
      }, 1000);

      $(“.”+e) // directly telling the function to catch class name and pass offset top


Leave a Reply

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

You are commenting using your 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