Is there a way to manipulate the scroll?

Question

When i refresh the page in google chrome, both mobile and pc, the scrollbar doesn't starts on the top, and this causes a visual bug on my page, which should start at the top, because I use overflow: hidden to hide the scrollbar and only modify the position of the sections, using a scrolling effect.

So, I wanted to know if there is a way to manipulate the scrollbar position in javascript or html, so that it always starts at the top. This only happens in Chrome

score 0 · Answer 1 · answered Oct 13 '22 at 19:25

0

Just set document.scrollTop = 0 on page load, This should do the trick.

answered Oct 13 '22 at 19:25

Asher Moshav

109
5

score 0 · Answer 2 · answered Oct 13 '22 at 19:26

0

Sounds like you're looking for Element.scrollTop

const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");
const button = document.querySelector("#button");
button.addEventListener("click", () => scroller.scrollTop = 0);
scroller.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${scroller.scrollTop}`;
});

#scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#output {
  padding: 1rem 0;
}

<button id="button">Scroll to top</button>
<div id="container">
  <div id="scroller">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </p>
  </div>
</div>

<div id="output">scrollTop: 0</div>

answered Oct 13 '22 at 19:26

Slava Knyazev

5,377
1
22
43

I managed to do this with divs, the problem is that I wanted to do it with the entire page, use her/body scroll, but I can't. I already tried to create functions using document.scrollTop = 0 but it didn't work. – Gabriel Santos Oct 13 '22 at 20:00
As part of what element would the scrollbar appear? If its the whole window, then do `Window.scrollTo(0)` – Slava Knyazev Oct 13 '22 at 20:04
Thanks! I didn't know this function, but for some reason, I can make it work with buttons and other commands, but I can't when starting the page. It activates and works, but does not lead to Y:0. `function toTop (){ if(window.scrollY != 0){ console.log('Test') console.log(window.scrollY) window.scrollTo(0, 0) } }` This function activates when loads the page. The console shows `'test'` and `'780'` for Y, but doesn't work. However, if I activate this function from the console, or from a button, it works. – Gabriel Santos Oct 13 '22 at 21:33
Remembering that it only starts with the wrong Y when refreshing the page in chrome. – Gabriel Santos Oct 13 '22 at 21:37
Thats because something offsets the scroll after the load. Wrap the call in a setTimeout(() => window.scrollTo(0), 2000)) – Slava Knyazev Oct 14 '22 at 01:02

score 0 · Accepted Answer · answered Oct 13 '22 at 23:30

I solved this problem by adding a delay to perform the function, I found the solution from someone going through the same in this 2016 post

I add this script:

let delay_ms = 15

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        window.scrollTo(0, 0);
        console.log(scrollY);
    }, delay_ms);
});

Is there a way to manipulate the scroll?

3 Answers3