AngryHacker
AngryHacker

Reputation: 61606

Anyway to animate smoothly on mobile device with jQuery?

Upon loading a reasonably long page, I need to smoothly scroll down to a certain on the page, so that the user doesn't have to.

$(document).ready(function () {
    // Handler for .ready() called.
    $('html, body').animate({
        scrollTop: $('#today').offset().top
    }, 'slow');
});

...
<div id="today">foo</div>

This works well in a desktop browser, but on the iPhone and especially on the Android, it is pretty jerky.

Questions:

  1. Am I going about it the right way? Is there a better way?
  2. Is there a way to specify a specific interval in milliseconds, instead of 'slow'?

Upvotes: 1

Views: 1774

Answers (1)

guest271314
guest271314

Reputation: 1

jQuery .animate() easing options appear set to swing by default , try setting to linear , e.g.,

$(document).ready(function () {
    // Handler for .ready() called.
    $('html, body').animate({
        scrollTop: $('#today').offset().top
    }, 2000, "linear");
});
#today {
  position : absolute;
  top : 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="today">today</div>

Upvotes: 1

Related Questions