JQuery ScrollTop() Does Not Work In Scrolling DIV On Mobile Browsers, Alternatives?

I am trying to scroll to a specific location in a scrolling DIV. Right now I am using a pixel offset with the jQuery scrollTop() function which works great on desktop browsers but

Solution 1:

This worked for me:

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );

Solution 2:

A workaound that worked for me: first, temporarily set the overflow property to 'hidden', then set the scrollTop property, then set the overflow property back to 'scroll' (or auto). The scrollTop value seems to be kept intact and honored when the overflow property is set back to 'scroll'. This was a pretty trivial workaround that worked on all browsers I tested on (desktop and mobile). I didn't test it exhaustively, and I didn't test with transitions in place, so there may be side-effects that I haven't encountered... Your mileage may vary - but it's an easy thing to try.

Solution 3:

I found the answer here http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

Mobile phones doesn't understand $('html,body') so u can do the following for mobile

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    window.scrollTo(0)
} else {
    // default `$('html,body')` code for scrolling
}

OR

simply use $('body') instead of $('html, body').

Solution 4:

rather than using the scroll, scrollTo, or scrollTop methods (which give me problems in mobile), I recommend setting an ID on your top DOM element (like #top), and just using:

document.getElementById("top").scrollIntoView();

that works the best for me so far across all devices and browsers.

Solution 5:

I have a couple solutions for you to try. You will have to test them yourself, as I have not tried them in a mobile browser before, but here they are:

1. Use jQuery's .css() method (or .animate() depending on what your eventual goal us) to adjust the top margin (note: you would have to change the overflow to hidden and wrap the text in an inner div, which would be the element whose to margin you are adjusting)
2. Do the same thing as in the first solution, except set the embedded div's position to relative and adjust it's top attribute.

Let me know if you need help with any if this or have any more questions about this. Good luck! :)

Note that although I have not tested these in mobile before they are based on CSS standards, not jQuery functions, so they should work.