I have an annoying problem on my website, I have been struggling for a few days to fix it and I can not do it at all. On my site here https://codurilevietii-888.ro/ each time i load a new page, the scroll position stays same as it was on the previous page. I want to force reset the scroll position (top) each time page is reloaded. This problem happen only on mobile sizes (responsive thing).

Does anybody know some code, html/css to force the page to load at the top each time it is refreshed? Would really appreciate that. I’m a newbie to coding.

Few topics about this that ive research and didnt work :(

https://stackoverflow.com/questions/3664381/force-page-scroll-position-to-top-at-page-refresh-in-html

https://ready.mobi/

Recommended Answers

All 4 Replies

I did a bit of research and saw that your site is based on a premium wordpress theme 'Sleek' from Themeforest
https://themeforest.net/item/sleek-responsive-creative-wordpress-blog-theme/9298728
I checked their demo and saw that it has also the scroll-position issue on small screensizes and the reasom for this is that on wider screensizes they used a custom scrollbar plugin (nanoScroller which is not maintained for years by the way) set on a div (main-content__inside) and on smaller screensizes they disable this plugin and use the native browser scrollbar just on the body.
Since the content gets loaded with AJAX it will not force the page to load at the top of the browser window, but on the scroll position from the previous AJAX content.

IIf you have a support license for that Wordpress theme, you should ask the authors of the theme to fix this issue. If you you don't have a support license, you should file this issue as a bug at them and wait for them to fix it and get the fix when they release a new version of the theme for download.

If you don't wanna wait for that and you have complete control of your wordpress site which means you can add scripts and/or functions to your (child)theme you can do a temporary fix such as:

$(document).ajaxStop(function () {
    $('body').scrollTop(0);
});

I saw your theme loads jQuery, so the above is the jQuery way of setting the scroll position at the top (0) of the browser window after the AJAX content is loaded.

Hello sir, thank you very much for taking your time to help me :).
I've try to asked them for help, but I didnt get any reply anymore for unknown reasons.. I've applied the code that you provide but still same issue, I'm not sure if I implemented correctly.

pic1.png

pic2.png

EDIT: sorry i check the website again with mobiready and seems to working well now, thank you very much!!!!! i swear a god this community Daniweb always saved me from trouble. You guys are the best!!!!

EDIT 2: I test it with few more responsive test tools and seems to be not fixed. Crazzy... Can you check for me if it works please?

Ok, yeah should be document instead of 'body':

$(document).ajaxStop(function () {
    $(document).scrollTop(0);
});

works fine now , thank you very much!

commented: Good stuff :) +7
commented: Excellent. Another satisfied customer - please spread the DaniWeb word :-) +16
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.