Search code examples
javascriptbrowserscroll

Why is Firefox scrolling to page top dependent on amount of displayed content in page?


I have a website where there is a link at the footer to a particular page state, e.g. the Rules. I say page state since the site is a single HTML page and individual "pages" are simply states of that one HTML page with certain content displayed and other content hidden. The footer content is the same and visible on all page states.

Regardless of what page state one is on, the link from the footer ought to navigate one to the top of the Rules page. And it does this except when the footer link is clicked from one particular page, in which case it goes to the end of the Rules page.

This anomaly is not experienced in either Chrome or Edge, in either desktop or mobile versions of such browsers.

The code script associated with the link to the Rules page is:

/** Moves browser to the Governance page and scrolls to the top of the page
*/
const switchToRulesPage = () => 
{
    if ('scrollRestoration' in history)         
    {
        history.scrollRestoration = 'manual';                                                                           
    }   

    window.scrollTo(0,0);                                                                                               

    switchPage('about-link', 'governance-cont', false);                                                                                     
}

I have tried re-ordering the above code so that the page state switch is done first and then the scroll to the top. But there is no change in browser behaviour.

For what it's worth, I've removed all errors from the HTML page via W3C Validator.


Solution

  • I have discovered by experimentation that this anomaly starts when the amount of content displayed on the page state from which one clicks the Rules link exceeds a certain amount. When the page state contains less displayed content than this, the "refusal" to scroll to the top of the page is no longer observed.

    In my case, the page showing the anomaly was a News page, i.e. a series of news items listed by publication date from most recent down to ~ 2 years past. Obviously this is too long a time interval for news items anyway and needs trimming. Eventually I collapsed the News items into the most recent one plus the headings of subsequent news items in the last 12 months. Each news item heading has a Read More ... button to display the full news item. Now only two news items may be open at a given instant - the most recent one and any other one.

    Yet I remain curious as to why Firefox has this "scroll refusal" for large pages and Chrome/Edge do not - or at least do not show the anomaly for a fairly substantial amount (~ 8 screenfuls) of displayed content in a page state.

    I have also amended this thread's title in the light of my discovery.