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 ) {
        event.preventDefault();
        $('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

 

Advertisements

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

      Like

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 )

Google+ photo

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

Connecting to %s