Prevent page scrolling

I have a little problem with jQuery Mobile and URL binding.

When the page loads, after the jquery throw event works fine, but then jquery execute the code and move the page up. * my problem does not bind the anchor on the same page, it links to another page with url binding, for example: example_jquery.html#wopwop

I am writing a small example for viewing does not work (you can test in any browser):

 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"> </head> <body> <div data-role="page"> <h1>wopwop</h1> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <a id="wopwop"></a> <h1>wopwop</h1> </div> </body> 

I am writing a patch watching a message on stackoverflow:

 <script type="text/javascript"> setTimeout(function(){ if(location.hash == "#wopwop"){ $.mobile.silentScroll($('#wopwop').get(0).offsetTop); } }, 700); </script> 

But I don’t think this is a solution, you know how to make this work?

thanks. Sorry for my poor english

+1
source share
2 answers

The default behavior of jQuery Mobile when displaying pages is to scroll up to show the page. The scroll value is always 0 and stored in $.mobile.defaultHomeScroll .

You need to override this value on any page event, but before the page is fully displayed and the transition is completed.

 if (location.hash == "#wopwop") { $.mobile.defaultHomeScroll = $('#wopwop').offset().top; } 

This will force the scroll on wopwop shift the div on the page without scrolling up and then back to that div.

+1
source
 $(document).ready(function(){ $('html, body').animate({ scrollTop: $("#wopwop").offset().top }, 7000); }); 
-2
source

Source: https://habr.com/ru/post/971417/


All Articles