Simple animated scroll for jQuery

If you use links to navigate to other elements on the same page, it’s generally a good idea to animate the scrolling so you don’t disorientate your users. There are jQuery plugins (such as ScrollTo) that offer many different ways for handling this, but if you don’t want to mess about with all the features of a new plugin then this snippet will be very useful. It’s a simple function that will scroll your page to any DOM element that you specify:

View this gist on GitHub

As you can see you can also specify the speed and a top offset for the scroll (I find this top offset very useful as default behaviour puts the target element flush with the top of the browser, which can make things feel a bit cramped). An added bonus is that it appends the target string to the current URL, so if you are using a standard anchor reference (such as #element) then users will be able to grab the URL and it will point to the correct location on the page. If you are using other selectors to target an element then I would recommend removing the function inside the animate call.

8 responses to “Simple animated scroll for jQuery”

Scroll Animado con jQuery ( Hugh Lashbrooke ) | mydevnotepad

April 22, 2013 at 2:44 pm

[…] Origen: http://www.hughlashbrooke.com/simple-animated-scroll-for-jquery/ […]

Reply
Ryan

October 1, 2013 at 4:36 am

Awesome script. Just have an adjustment to prevent animating to a point on the page that you are already at

if (jQuery( ‘html,body’ ).scrollTop() != destination) {
jQuery( ‘html:not(:animated),body:not(:animated)’ ).animate( { scrollTop: destination}, speed, easing, function() {
window.location.hash = target;
});
}

Also made it into a direct click event listener

jQuery(‘a’).click(function(e) {
e.preventDefault();
// Source – http://www.hughlashbrooke.com/simple-animated-scroll-for-jquery/
var topoffset = 0;
var speed = 1000;
var easing = ‘easeOutQuart’;
var target = jQuery(this).attr(‘href’);
var destination = jQuery( target ).offset().top – topoffset;
if (jQuery( ‘html,body’ ).scrollTop() != destination) {
jQuery( ‘html:not(:animated),body:not(:animated)’ ).animate( { scrollTop: destination}, speed, easing, function() {
window.location.hash = target;
});
}
});

Reply
1. Hugh Lashbrooke
  
  October 1, 2013 at 8:27 am
  
  I’ll test that out soon, but the code looks solid. Nice work!
  
  Reply
  1. Ryan
    
    October 1, 2013 at 11:46 pm
    
    Didn’t work in Chrome so I will work on modifying
    
    Reply
    1. Ryan
      
      October 2, 2013 at 12:16 am
      
      This should work.
      
      jQuery(‘a.hash’).click(function(e) {
      e.preventDefault();
      // Source – http://www.hughlashbrooke.com/simple-animated-scroll-for-jquery/
      var topoffset = 0;
      var speed = 1000;
      var easing = ‘easeOutQuart’;
      var target = jQuery(this).attr(‘href’);
      var destination = jQuery( target ).offset().top – topoffset;
      var current = jQuery( ‘html’ ).scrollTop() + jQuery( ‘body’ ).scrollTop();
      if (current != destination) {
      jQuery( ‘html:not(:animated),body:not(:animated)’ ).animate( { scrollTop: destination}, speed, easing, function() {
      window.location.hash = target;
      });
      }
      });
      
      Also made another version that stops previous animations and goes to the currently clicked location which negates the need to check the current location.
      
      jQuery(‘a.hash’).click(function(e) {
      e.preventDefault();
      var topoffset = 0;
      var speed = 1000;
      var easing = ‘easeOutQuart’;
      var target = jQuery(this).attr(‘href’);
      var destination = jQuery( target ).offset().top – topoffset;
      jQuery( ‘html,body’ ).stop(true).animate( { scrollTop: destination}, speed, easing, function() {
      window.location.hash = target;
      });
      });
      
      Reply
      1. Hugh Lashbrooke
        
        October 2, 2013 at 6:28 am
        
        Nicely done Ryan! great commitment to detail 🙂
Pablo

May 28, 2014 at 3:25 pm

Awesomeeeeee thanks =D

Reply
Sajjad

August 8, 2016 at 9:12 am

Great and helpful tutorial. I am using this , This is also simple
$(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(“.scrool-top”);
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass(“scrool-is-visible”) : s.removeClass(“scrool-is-visible scrool-fade-out”), e(this).scrollTop() > t && s.addClass(“scrool-fade-out”)
}), s.on(“click”, function(a) {
a.preventDefault(), e(“body,html”).animate({
scrollTop: 0
}, l)
})
})

Reply