Javascript

Scroll To Element With JQuery

Posted by Weston Ganger on May 11, 2015

If you want to smoothly scroll to an element using jQuery its pretty easy. Heres how:


$("#button").click(function() {
  $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
  }, 2000);
});

This will scroll to the element with a speed of 2000ms(2sec).

If you have a fixed header or fixed navigation just add minus the height of it from the offset().top:


$("#button").click(function() {
  $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top-50px
  }, 2000);
});


Related External Links:


Posted in Javascript and Tagged with javascript jquery scroll-to 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts