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.
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.
Share Improve this question edited Aug 28, 2013 at 9:04 Bart Burg asked Aug 28, 2013 at 8:57 Bart BurgBart Burg 4,9248 gold badges55 silver badges87 bronze badges 2-
1
Try selecting both
htmlandbodyelements:$('html, body')– Ram Commented Aug 28, 2013 at 9:02 - Thank you, that's the answer – Bart Burg Commented Aug 28, 2013 at 9:03
2 Answers
Reset to default 6With 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');
});
Use this and try,
$(document).on("click", "#programmaMenu", function(event){
event.preventDefault();
$('html').stop().animate({
scrollTop: $("#"+$(this).attr("rel")).position().top - 120
}, 500, 'swing');
});