ScrollTop error in Safari ipad

Question

I am making a responsive website with bootstrap with html binding in my navigation. In my navigation bar I have a logo, when a user clicks on it, the site scrolls up. And everything works on the desktop. But on the ipad with Safari, when I click on the logo to scroll up, it only works once. And my navigation bar with an anchor error after that.

How to fix it?

My code is:

$(document).ready(function(){ $('.brand').bind('click',function(){ $('html,body').animate({scrollTop: 0}, 'normal'); }); }); 

Answer 1

UPDATE

Try the "on" binding method

In JQuery 1.7+, it’s best to use the “on” method without binding.

 $(document).ready(function() { $(".brand").on("click", function () { $('body').animate({scrollTop: 0}, 'normal'); alert('image is clicked') }); }); 

Thanks AB

Answer 2

I had the same problem. Read somewhere that mobile Safari does not scroll the body, it moves the viewport, so you need to scroll the div.

If you use jQuery, you can just use the scrollTo plugin or hardware acceleration speed.js - this worked for me. Note that speed requires the scrollable element to have a non-static position (i.e. relative, absolute, fixed)