scroll to top is not smooth enough

Question

i am using this script for scroll to top button:

$(document).ready(function(){
    $(".upp").click(function(){
        $('html, body').animate({scrollTop: '0px'}, 1200);
    });
});

It is going to top while being animated, but the animation is not smooth enough.it jumps at some parts, then slides to top. I even tried increasing the value from 1200 to 5000, but it scrolls while jumping at certain points. i am using simple jquery library (latest version).Do you think that adding jquery UI will solve anything? please help.

Answer 1

I think your best bet is to utilize the easing option of .animate()

From the documentation :

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear . More easing functions are available with the use of plug-ins, most notably the jQuery UI suite .

$(".upp").click(function(){
    $('html, body').animate({scrollTop: '0px'}, 1200, 'linear');
});

Answer 2

This is not an easing or animation problem.

The smoothness is going to depend on your content. That's it.

If you have image heavy site, scrolling will be a pain. Image backgrounds... Don't even think about many high quality fixed image backgrounds and smooth scroll... Browsers don't handle that well.

The only workaround I found was to scrap scroll completely and implement a fake one myself by changing the margin of my container. With CSS3 transitions that is generally smooth even for heavy sites. But this is generally not worth the hassle...

Update

If it's still slow after stripping your the images, then the problem clearly sits in your parallax code. Look at the bottlenecks. Find out which frames cause the delays. See if you can optimize the code a bit. Less references to DOM? Maybe cache some elements? Simplify some maths?

Answer 3

try this:

 $('html, body').animate({ scrollTop: $('.docs').offset().top}, 2000);

Answer 4

You should use CSS3 transition: {original DEMO site: http://mitgux.com/demo/smooth-scroll-to-top-using-css3-animations/index.php }

DEMO

$('a').click(function (e) {
    e.preventDefault();
    $("body").css({
      "margin-top": -$(this).offset().top+"px",
      "overflow-y": "scroll", // This property is posed for fix the blink of the window width change 
    });
    $(window).scrollTop(0);
    $("body").css("transition", "margin-top 1.2s ease");
    $("body").css("margin-top", "0");
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function () {
        // Remove the transition property
        $("body").css("transition", "none");
    });
});

Answer 5

<a href="javascript:" id="return-to-top"><i class="glyphicon glyphicon-chevron-up" aria-hidden="true"></i></a>

//*** Scroll to Top *** use with less *** use with html ***
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
            $('#return-to-top').fadeIn(200);    // Fade in the arrow
        } else {
            $('#return-to-top').fadeOut(200);   // Else fade out the arrow
        }
    });
  
    $('#return-to-top').on('click', function(event) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: $('html, body').offset().top,
        },'linear');
    });//End Scroll to Top

Answer 6

This will help you to do the smooth scroll:

$('a').click(function() {

    //For testing moving the scroller to the top
    $('div').scrollTop(0);

    //Scroll to bottom
    $('div').animate({scrollTop: $('div').get(0).scrollHeight}, 3000);

   //Prevent Default
   return false;
});

Demo: http://jsfiddle.net/codebombs/GjXzD/