How do I animate scroll on a mobile webbrowser using jQuery?

Bart Burg picture Bart Burg · Aug 28, 2013 · Viewed 7.7k times · Source

What I wan't to achieve is the page to scroll to a certain position when a button is pressed. I have this working on browsers like Chrome and IE but it doesn't seem to work on any mobile browser.

This is the code I use:

$("#programmaMenu").on("click", "div", function(event){
        event.preventDefault();
        $('html').stop().animate({
            scrollTop: $("#"+$(this).attr("rel")).position().top - 120
        }, 500, 'swing');
});

The event does fire, only the scrolling doesn't occur.

Answer

Bart Burg picture Bart Burg · Aug 28, 2013

With thanks to the user vohuman, this is the answer:

Apparently mobile browsers scroll the body element and desktop browsers scroll the html element. Therefor, the solution to the question is selecting both the elements 'html' and 'body' like so:

$("#programmaMenu").on("click", "div", function(event){
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: $("#"+$(this).attr("rel")).position().top - 120
        }, 500, 'swing');
});