Page refresh causes page to scroll to the top

[davidzchen]

trafficstars

Usually, after refreshing a page, the page still stays at the same position prior to the refresh. However, I noticed with MDL, the page would jump back to the top after refresh. Is this intended?

[sgomes]

This is likely due to the way we're taking care of things inside the Layout component. Since we're scrolling inside of an element rather than on the body, the browser doesn't know how to keep the current position.

This would be a BC break for v1.x, but we'll try to address the issue when rewriting layout in v2!

[davidzchen]

Understood. Looking forward to V2!

[soarez]

This breaks anchor navigation.

I'm resorting to this terrible hack:

var interval = setInterval(function() {
  if (window.location.hash)
    window.location = window.location.hash;
}, 100);
 setTimeout(function() { clearInterval(interval); }, 1000);

[kybarg]

Solution https://github.com/google/material-design-lite/issues/1120#issuecomment-169090777

[compressed]

I was able to fix this by overriding the div with the mdl-layout class by specifying height: auto in the css. _layout.scss is specifying it as height: 100% which seems to cause the scrolling to top behavior.

The scrolling to top on refresh was less of an issue, but the scrolling to top after the mdl js loads seems quite bad, especially if the user has already scrolled down reading the page before the js has finished loading, at which point they are brought abruptly to the top again, quite jarring.

[grote]

Thanks @compressed! I can confirm that your workaround solves the problem of the page jumping to the top after it has been loaded fully.

[finchlanger]

but then the header is not fixed

[listedegarde]

@kybarg Not sure whether to reply on this thread or on #1120 but I'm assuming that solution has not been implemented on the Google Developers website? Neither the hash nor the reload works: https://developers.google.com/web/fundamentals/discovery-and-monetization/social-discovery/?hl=en#use-schemaorg--microdata-to-provide-rich-snippets-on-google

I'm definitely looking forward to a fix for this, especially the hash.

[viotti]

I'm using the mdl-componentupgraded event to have anchor navigation working properly. Page reload still fails.

$(function() {
    $('.mdl-layout').on('mdl-componentupgraded', function(e) {
        if ($(e.target).hasClass('mdl-layout')) {
            if (window.location.hash)
                window.location = window.location.hash;
        }
    });
});

Depends on jQuery, but conversion to pure JS should be straightforward.

[brettdewoody]

@sgomes - will v2 also address the issue where the page returns to the top when it finishes loading? That is, if you start scrolling before the page has finished loading, it will jump to the top when loading completes. You can see this issue in the demo site - https://getmdl.io/templates/android-dot-com/index.html

[Garbee]

Yes since we aren't dynamically destroying and re-injecting the content. This is all related to the same problem in the V1 code.

[JeffAlieffson]

Thank U viotti. It works for hash, even if I refresh the page I changed your code slightly to make it JQuery free:

function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
document.addEventListener('mdl-componentupgraded', function(e) {
        if (hasClass(e.target, 'mdl-layout')) {            
            if (window.location.hash)
                window.location = window.location.hash;
        }
    });

[jaylinski]

Kind of ironic that one of the official example pages is fixing this exact issue by overwriting mdl styles: https://rework.withgoogle.com/

But it's a good example on how you can fix this issue on your own site. :+1:

[SarG100]

Excuse me. Can you tell me where to put the above code in my website? I am new to web development.

[Akshat162001]

window.addEventListener('beforeunload', function() { sessionStorage.setItem('scrollPosition', window.scrollY); });

// Restore scroll position on page load window.addEventListener('load', function() { var scrollPosition = sessionStorage.getItem('scrollPosition'); if (scrollPosition !== null) { setTimeout(function() { window.scrollTo(0, scrollPosition); sessionStorage.removeItem('scrollPosition'); }, 0);

This can also be done to prevent the page to scroll... } });