Support » Plugin: Page scroll to id » Jumping to link first on page load in Firefox

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author malihu

    (@malihu)

    Hello David,

    We can’t really control the way Firefox loads/renders pages with anchors/ids.

    The plugin does its best to immediately prevent jumping to targets when the document is rendered in order to scroll smoothly after the page is fully loaded. It seems that Firefox is jumping to the anchor even before the DOM ready event fires.

    This affects scrolling from/to different pages, which is not guaranteed to provide a fully smooth experience for the user (e.g. the page might take long time to load or have the issue you’re experiencing on Firefox etc.).

    If you want a completely smooth, zero-millisecond transition between sections, you need to have a single page site/app. Transitions between sections on different pages/URLs will always have some delay and/or rendering stutter (even for few milliseconds).

    Hope this helps

    Hi there,

    There is an HTML version of the site here that has normal scrolling on Firefox. How are they achieving this:

    https://www.freedtranslations.com/what-we-do.html#translation

    Click on ‘Click for quote’

    Regards,

    David

    Plugin Author malihu

    (@malihu)

    They do this by scrolling the page before content is fully loaded (if you test it on Firefox, you’ll see that the page starts scrolling before the large top image is loaded).

    You can test this by disabling cache and load the page on a slower internet connection. You’ll see that the page will scroll to the wrong place while page elements are still loading (you’ll have to click the “Click for quote” link again to scroll to the right place).

    All this means that what they do doesn’t really work. It looks ok when you test it because you load most page assets (e.g. images) from browser’s cache (because you’ve been to this page before) and you’re not on a slow network.

    The code they use is very simple and you can test it on your page if you want, just keep in mind that any user that is on slow network (e.g. on mobile) and/or visits your page for the first time and/or has disabled browser’s cache will scroll to the wrong place (and the longer the page, the more wrong position the page will scroll to).

    To test it, go to “Page scroll to id” settings and disable/uncheck “Scroll from/to different pages (i.e. scroll to target when page loads)” option. Save changes.

    Add the following script in your page head tag (it’s probably in your theme’s header.php):

    <script>
    if (location.hash){
    	setTimeout(function(){
    		window.scrollTo(0, 0);
    		target = location.hash.split('#');
    		if(target.length){
    			$('html,body').animate({
    				scrollTop: $('#'+target[1]).offset().top
    			}, 2000);
    		}
    	}, 1);
    }
    </script>

    Save the file and test your page.

    • This reply was modified 1 year, 3 months ago by malihu.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Jumping to link first on page load in Firefox’ is closed to new replies.