I have a website where huge amounts of data can be retrieved from a MySQL database. It has the Material Lite as the core design. The problem is, when I open a page and scroll down, the page goes to the top as soon as it finishes loading, which is frustrating for readers.

I've checked all my scripts, and I even removed them all, keeping Material Lite, yet the outcome is the same.

Even on their own website, they have this issue (https://getmdl.io/components/index.html). You can try it, but try to be quick scrolling down before the page loads.

One thing I noticed is when I remove the class "mdl-js-layout" from the main "mdl-layout" div, the problem disappears.

Here's the tag before removing the class aforementioned:

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button"> page content goes here.... </div>

I've taken it from the Material Lite guide.

And here's the Material Lite script I'm using:

<script name="material_script" defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

Any ideas on how to keep this class yet get rid of the problem? (Not sure if I have to keep it, but this is how the div is built according to the ML website).