locomotive-scroll: On refresh does not scroll up to top

Hello 👋

Describe the bug When I refresh the page most of the time the current position is calculated as top of the page. To make it clear. If I scrolled down to half of the page and refresh it then the top of the page will be at the half of the page. I cannot scroll up but I can scroll down having blank section.

To Reproduce Here is my very basic structure

<div id="loco-scroll"> <div class="one vertical red" data-scroll data-scroll-speed="0" data-scroll-direction="vertical" ></div> <div class="two horizontal green" data-scroll data-scroll-speed="4" data-scroll-direction="horizontal" ></div> <div class="three horizontal blue" data-scroll data-scroll-speed="2" data-scroll-direction="horizontal" ></div> <div class="four horizontal yellow" data-scroll data-scroll-speed="2" data-scroll-direction="horizontal" ></div> <div class="five vertical orange" data-scroll data-scroll-speed="2" data-scroll-direction="vertical" ></div> </div> <script src="js/locomotive-scroll.js"></script> <script> const scroll = new LocomotiveScroll({ el: document.querySelector('#loco-scroll'), smooth: true, }); </script>

stylesheet `#loco-scroll div { width: 100vw; height: 100vh; }

.red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } .orange { background-color: orange; }`

Expected behavior Jump to top of the page

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: macOS Catalin v10.15.2
Browser same thing happens in <del>Safari, Firefox,</del> Chrome
Version latest

Thank you 👊

Laszlo

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 18 (1 by maintainers)

Commits related to this issue

fix: smooth scroll Bugs in order https://github.com/locomotivemtl/locomotive-scroll/issues/353 https://github.com/locomotivemtl/locomotive-scroll/issues/72 — committed to Amir-A-M/RajaeeSchool by Amir-A-M a year ago
fix: smooth scroll Bugs in order https://github.com/locomotivemtl/locomotive-scroll/issues/353 https://github.com/locomotivemtl/locomotive-scroll/issues/72 a — committed to Amir-A-M/RajaeeSchool by Amir-A-M a year ago

Most upvoted comments

After testing some CSS, I found you need to set width and height in html, body to properly work after refreshing the page.

html, body {
   width: 100vw;
   height: 100vh;
}

+28

podrivo on Feb 29, 2020

I have noticed this issue on Chrome. Firefox seems fine and always starts at the top of the page upon refreshing.

One way to counter this is to add a handler on the onbeforeunload event and force the window to go back to top with javascript like so : window.onbeforeunload = function () { window.scrollTo(0,0); }; Weirdly enough, it doesn’t seem to work on one of my coworker’s computer (Chrome)

+12

maximeDore on Jan 31, 2020

Hello guys!

We had a history.scrollRestoration = 'manual' in the Smooth class, in this commit https://github.com/locomotivemtl/locomotive-scroll/commit/64977e131687c1e3e9609ddc08131fe20d5a7f01 I hope it will works! It was released in 3.5.4 ✌️

Thanks

quentinhocde on Jun 1, 2020

<del>I suspect the width and height property can cause issue but I need them to be full screen.</del> Tested with text without 100vw 100vh and same thing happen. When I close window and open a new one it renders correctly. Only refresh causes this issue.

Lacika1981 on Jan 14, 2020

@podrivo’s answer didn’t work for me. It somehow disabled the scroll altogether. This only seems to happen in Chrome.

elebumm on Mar 3, 2020

I have managed to find a working hack for this. Using a setTimeout of only 10ms after initializing Locomotive-scroll to force the window to scroll up seems to be working fine, even with a page transition plugin like Swup. setTimeout(function(){ window.scrollTo(0,0); }, 10); Sadly, having any kind of delay (even as short as 10ms) might cause a slight stutter on page load.

maximeDore on Feb 25, 2020

i am running into the same issue with the plugin and used a similar method to always scroll to the top whenever a page reloads. but i would actually love to see this fixed. 🥇

jaro-io on Feb 12, 2020

Check this https://ihatetomatoes.net/demos/barbajs/

freieradikale on Jan 13, 2021

I was able to fix both the page not being able to be scrolled to the top and the pinning issue by using setTimeout(() => window.dispatchEvent(new Event('resize')), 10); after initializing Locomotive Scroll.

ZachSaucier on Apr 16, 2020

@podrivo Yes, it’s working, is this a workaround or is the way the library works? If so this needs to be in the documentation

Second, refreshing the page starts from top, but is this the correct behavior. It would be better if refreshing page started from the previous position.

dangelion on Mar 1, 2020