CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
AngryHacker
AngryHacker

Reputation: 61646

How to scroll the page smoothly?

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?

Upvotes: 3

Views: 4280

Answers (3)

alexisdevarennes
alexisdevarennes

Reputation: 5642

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

Upvotes: 5

tao
tao

Reputation: 90277

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.

Upvotes: 2

Ethan
Ethan

Reputation: 3818

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

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

Upvotes: 2

Related Questions