Make mobile page always load at the top

Question

I have tried to get this to work and was unsuccessful. I just want to have my mobile page views load at the top. I have tried the following.

// Method 1:
$('body').scrollTop(0);

// Method 2:
document.body.scrollTop = 0;

// Method 3:
$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});

I tried here first and was unsuccessful.

I just want to always start at the top of the page when I click a link in mobile. I have no idea as to why none of these solutions work.

Alessandro Incarnati · Accepted Answer · 2015-04-15T21:21:52.260

2

You can use also vanilla JS for it:

document.body.scrollTop = document.documentElement.scrollTop = 0;

or with JQuery

$(document).ready(function() {
    $(this).scrollTop(0);
});

Try also

$('html,body').scrollTop(0);

Check this demo as well, might help https://jsfiddle.net/a_incarnati/v575uvyb/2/

edited Apr 15 '15 at 21:21

answered Apr 15 '15 at 21:07

Alessandro Incarnati

7,018
3
38
54

Tried this too. When I refresh it goes to the top but when I click a link to a new page it doesn't. – riotgear Apr 15 '15 at 21:12
Oh, so your issue it's when you click on a link and open a new tab/page it's not at the top? – Alessandro Incarnati Apr 15 '15 at 21:14
I made another demo for you. Check my updated answer. – Alessandro Incarnati Apr 15 '15 at 21:22
Hey I just checked the demo. It still doesn't go to the top on page change. I changed it to.$('html,body').animate({ scrollTop: 0, scrollLeft: 0 }, 200, function(){ $('html,body').clearQueue(); }); – riotgear Apr 15 '15 at 21:29
I know, I was testing the scroll and i left the variables. I commented it for you too :) – Alessandro Incarnati Apr 15 '15 at 21:49
Still trying to make sense of it sorry. – riotgear Apr 15 '15 at 23:38
1

It did work! Thank you. Adobe CQ was the issue. Their mobile emulator was making me think it was not working. Thank you. – riotgear Apr 16 '15 at 18:12

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

You should include $(this).scrollTop(0); within a $(document).ready(); call, like so:

$(document).ready(function() {
    $(this).scrollTop(0);
});

In your code, you are calling $(this).scrollTop(0); before the page unloads, rather than after the page and DOM have been reloaded.

edited May 23 '17 at 12:29

Community

1
1

answered Apr 15 '15 at 20:43

Ninjakannon

3,751
7
53
76

What happens instead? Are you sure the function is being called? – Ninjakannon Apr 15 '15 at 20:49
I am sure because the alert loads. When I scroll halfway down the page then click to go to a new page it stays at the same vertical position instead of starting at the top. – riotgear Apr 15 '15 at 20:50
Are you loading new page content in to the same page via AJAX, or truly loading a new page? – Ninjakannon Apr 15 '15 at 20:52

Make mobile page always load at the top

2 Answers2