Search jQuery

jQuery Forum

jQuery Mobile

waynmeyer

Jquery mobile scroll to top of page on page load

in jQuery Mobile • 8 years ago

Hi everyone

I have done extensive research on creating a solution for my problem, all forum posts just dont answer my question.

Im using an iPhone 5 to test my web app. Everytime i load a new page dynamically from my CMS i find that if i scroll to the bottom BEFORE the page fully loads then i get scrolled to the top of the page when the page has completed loading. This is highly unwanted as i could only imagine that when my listviews are long this would be highly annoying to any user thats half way down the list.

Please could somebody assist me? I have tried the following codes

<script language="javascript">
$(document).ready(function() {
$(".dropdown dt a").click(function(event) {
event.preventDefault();
$(".dropdown dd ul").toggle('slow');
});
$(".dropdown dd ul li a").click(function(event) {
event.preventDefault();
$(".dropdown dd ul").hide();
});
});
</script>

I also tried this code

<script>
$(function() {
$.mobile.silentScroll (0);
});
</script>

Any help would be greatly appreciated.

Kind regards

Replies(14)

mitchsa

Re: Jquery mobile scroll to top of page on page load

8 years ago

Hello

Do you have a Live site we can visit?

Thanks

haga0054

Re: Jquery mobile scroll to top of page on page load

8 years ago

Well first off you shouldn't ever use $(document).ready(...) in JQM.

http://view.jquerymobile.com/1.3.1/dist/demos/faq/dom-ready-not-working.html

See the documentation above.

As for your scripting it's hard to help without context. Where is this scripting? You do realize that scripts are run in the <head> of the first page loaded only, right? If not read documentation below.

http://view.jquerymobile.com/1.3.1/dist/demos/faq/scripts-and-styles-not-loading.html

Finally I think I remember an issue with this if the listview is long... I can't really recall though, I can search when I have some time.

watusiware

Re: Jquery mobile scroll to top of page on page load

8 years ago

haga, you are thinking of an unrelated issue.

If a page is long (more than 3x window height), then when you navigate to an already-loaded page, it will not return to it's previous scroll position.

I don't know how it's possible to scroll before the page is fully loaded. The page should be fully loaded before you ever see it.

Without an example, we can only guess, so I will not attempt an answer.

haga0054

Re: Re: Jquery mobile scroll to top of page on page load

8 years ago

Gotcha. Thanks for the clarification. That is what I was trying to remember.

waynmeyer

Re: Re: Jquery mobile scroll to top of page on page load

8 years ago

Hi Watusiware

Thank you for the response. You are correct Haga was way off target :)......but thanx for trying haga.

Watusiware, the actual problem you describing is not my issue. This is my problem, i will send you a link, can you tell me where is your preferable way to receive links?

My Problem: if i load a page, and scroll on that particular page immediately before the page is loaded. I leave my scroll position a the bottom of the page, i then wait for the page to load fully. Upon completion of loading the page i find that when im still at the bottom of the page, the loading finishes and pushes me all the way to the top of the page. Then i scroll down all over again.

In a third world country like SA, you find we use edge connection and our 3G is not that great, one service provider has LTE or 4G -> only this year. So im able to scroll my page before it loads. In America the connection is so fast that when you initiate scroll the page is already loaded. In this case please use a slower connection to reproduce my issue follow as explained below.

When you visit the link. Follow my instruction to reproduce the problem.

1. Click link

2. Immediately scroll before page is fully loaded.

3. DO NOT touch your screen just leave the page to complete its load.

4. Now witness the jump to top of page automatically.

Extra information about my setup rig.

Using rel external links for loading external JS in my page for custom maps ect. Just something i need for a plugin. nothing to d with jquery. I dont use hash navigation for this same reason. so every page load is basically a reload fresh page.

Any help would be greatly appreciated.

Kind regards

watusiware

Re: Jquery mobile scroll to top of page on page load

8 years ago

Using rel external links for loading external JS in my page for custom maps ect. Just something i need for a plugin. nothing to d with jquery. I dont use hash navigation for this same reason. so every page load is basically a reload fresh page.

This is what is causing your problem. Was having trouble understanding how it's even possible to scroll a page before it's fully loaded.

Frankly, I would recommend not using jQuery Mobile in this case. Your project isn't suitable for it. There's not much point if you have disable Ajax loading. Way too much per-page overhead in this case.

In addtion to the problem you've observed, this means everything is re-loading for every page. Yes, it gets cached in the browser cache, but it still involves network access to check headers. So, in a slow-network environment, this is just making the slow-network problem worse.

You might want to look into jQuery UI.

bmeist

Re: Jquery mobile scroll to top of page on page load

8 years ago

I have the exact same issue as waynmeyer. I agree with watusiware that if you disable ajax and hash listening like I did, jquery mobile is probably not the best solution. However, that ship has sailed as we have been using it for a few years now. This problem only started after we upgraded from jquery mobile 1.1 to 1.3.2.

If anyone has a suggestion for a workaround or fix, I would GREATLY appreciate it!

Thanks in advance,

--Brian.

bmeist

Re: Jquery mobile scroll to top of page on page load

8 years ago

I would be willing to tip anyone with a workaround for this. If there was a way to disable programmatic scrolling, or catch the event and do nothing, maybe that would do it? Thanks.

Veselin K..

Re: Jquery mobile scroll to top of page on page load

8 years ago

I was having the same issue, Here's the changes I did to make it stop scrolling to the top of the page on page load.

Changes to createHandler function:

Inside startIn function change:

scrollPage();

into:

if ($from) { scrollPage(); }

Inside doneIn function change:

scrollPage();

into:

if ($from) { scrollPage(); }

Comment out these 2 lines inside an anonymous function at the bottom of jquery.mobile.js:

window.scrollTo( 0, 1 );

$window.load( $.mobile.silentScroll );

That's it. No more scroll to top.

Fabien Qu..

Re: Jquery mobile scroll to top of page on page load

7 years ago

Thanks Veselin Kulov for your tip, It drove me to the solution I was looking for.

However, modifying the jQuery Mobile core code is not the best solution. JQuery Mobile lets you overwrite some of its function to change its behavior in a cleaner way.

Add a js file that is loaded after jquery mobile library with the following code :

(function($){
$( document ).on( "mobileinit", function() {
var silentScroll = $.mobile.silentScroll;
$.mobile.silentScroll = function( ypos ) {
if ( $.type( ypos ) !== "number" ) {
// FIX : prevent auto scroll to top after page load
return;
} else {
silentScroll.apply(this, arguments);
}
}
}
}(jQuery));

This code will overwrite the `silentScroll` function and prevent its execution if the position to scroll is not specified. If the position is specified, the original jQuery Mobile function is called.

vecinos.b..

Re: Jquery mobile scroll to top of page on page load

7 years ago

Hi,
I made a couple of changes to Fabien's code (it threw an error due to unclosed curly braces). It's now working!!! Thank you all for helping me find a working solution to this problem...