javascript - jQuery animate not scrolling on mobile devices if viewport present (CSS might be the issue) -

on responsive html page have link when clicked should scroll down bottom of page. added following code...

birdcontainer.find('.my-link').click(function(e) {   e.preventdefault();   $("html, body").animate({ scrolltop: $(document).height() }, 1000); } 

this works fine on desktop, on mobile devices doesn't work. can see function getting called in debugger page doesn't move.

now if remove line page's html...

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

then works on mobile also. can explain why viewport meta tag should prevent jquery's animate scrolling down on mobile?

update:

i found link triggers scroll inside div (named pagehandle) has below css..

@media (max-width: 767px) { #pagehandle {-webkit-overflow-scrolling:touch;/* height: 100%; */overflow-y:auto;} .navbar {border:0;} .hide-scroll {position: absolute;top: 0;bottom: 0;overflow-y: hidden;} 

if remove div, starts working on mobile (even viewport meta tag).

could explain why css tag should prevent jquery's animate scrolling down on mobile?