jQuery scrollTop() does not work in scrolling DIV

Question

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 it does not work on android mobiles browsers with the exception of Google's Chrome Android browser (do not have an iOS device to test if that works). All the solutions I have found are for page (window) scrolling and not for scrolling in a DIV, anyone have any suggestions on what else I can use to accomplish the same task?

Here is a example:
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

Other things I have tried that work in desktop browsers:

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

EDIT 3/11/13:

This is a know android browser issue: https://code.google.com/p/android/issues/detail?id=19625

One user in the bug report suggested a workaround:

because the issue only seems to appear when the overflow property is set to scroll, you can first set it to 'hidden', set the scrollTop property, then reset it back to 'scroll' (or auto). The scrollTop property seems to be honored when the element is re-rendered with scrollbars. It's not clear if this has any unexpected side-effects, but "it works on my machine!"

Answer 1

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.

Answer 2

The only way i could achieve scrolling to the top of the page on a Galaxy Tab was hiding the page body for 100ms while scrolling. Using jQuery:

$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);

Answer 3

Temporarily setting the overflow property to 'hidden', as recommended in @Allan Nienhuis' answer, does not work on Android 4.0.3, for instance (which is, e.g., what the Kindle Fire 2s are running) - when you set overflow back to scroll, the element scrolls back to the top.

Alternatives:

• Roll your own scrolling via a helper function, as demonstrated here - while this is simple to implement, it is bare-bones in that it doesn't give you inertial scrolling or overscrolling.

• Use a library such as iScroll, which implements its own, sophisticated scrolling (inertial, overscrolling) based on CSS transformations.

Using iScroll requires a bit of setup, though: you need a wrapper div with fixed height and style overflow: hidden and the element to scroll should have no overflow style. This jsFiddle demo shows how it's done.

Answer 4

jQuery(document).ready(function($) {

$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});

<a href="#top" class="scroll"></a>

Answer 5

Use the following code:

$("body").animate( { scrollTop: 50,  },  800,  function(){
    $("body").clearQueue();
} );

Answer 6

I had the same problem and solved it by using jquery .offset() instead.

http://api.jquery.com/offset/

$('#yourFineElement').offset({ top: X, left Y)});