How to scroll the page smoothly?

AngryHacker_9382 0
Viewed 3968

I need to scroll the page on load to a certain position on the page in an animated manner. And it works fine (using jQuery's animate):

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "linear");
});

However, one thing that it is not is smooth. Particularly on a mobile device it feels very jerky.

I've seen some CSS animations (using transition and transform) that are very smooth but can't figure out how to apply it to page scrolling. Is it possible to do what I want using CSS?

animation css html jquery javascript
3 Answers

Try setting the following css:

<style type="text/css">
    html {
      scroll-behavior: smooth !important;
    }
</style>

You could also try using vanilla JavaScript instead of jQuery:

function showIt(el_id) {
    var el = document.getElementById(el_id);
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

Also consider adding an itermediary element in the middle of the page, example:

<div id="middle" style="display: none;"></div>

function showIt(el_id) {
    var middle_el = document.getElementById('middle');
    var el = document.getElementById(el_id);
    middle_el.scrollIntoView(true, {behavior: "instant"});  // Go to middle directly and then scroll slowly to #today.
    el.scrollIntoView(true, {behavior: "smooth"});
}
showIt('today')

More info on scrollIntoView: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Also you might be interest in: Scrolling slow on mobile/ios when using overflow:Scroll if you are on iOS

user_29734740

The best solution for cross-browser/cross-device decent smooth scrollTop I found is using velocity.js. It's faster than jQuery's animate, quite light and supports multiple syntaxes, one of them being the one used by jQuery.animate(), so all you need to do is to replace .animate() with .velocity() (and loading the thing, of course).

I know there might be other solutions out there, but this one has been solid for years, they are always keeping it up to date, I'd say it's a keeper in any serious frontend web developer's tools. You'll find some very fancy names on velocity's libscore page. And no, I'm not affiliated. I'm just thankful for being able to use it for free.

user_18916770

Try using easeOutCubic or another easing function (choose one here):

$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#today').offset().top - 50
    }, 800, "easeOutCubic");
});
user_53745600
Related