0

I currently have a really great vanilla JS script in place that smooths out the page scroll when the user is scrolling with the mousewheel. (Original script grabbed from here https://stackoverflow.com/a/47206289/9817996)

After adding a scroll to top link using <a href="#">Scroll to top</a> for simplicity, I have come across an issue where when this link is clicked, the page scrolls to the top then bounces right back to where it was.

Here is a Codepen showcasing the issue: https://codepen.io/kiaramelissa/pen/zYrYbbj

I have also tried creating a scroll to top button using Javascript but it does the exact same thing. I was wondering if anyone could assist with figuring out what is causing this?

I would ideally like to keep my smooth scroll as vanilla JS and not utilise any bulky plugins. Thanks in advance for any ideas!

Kiki
  • 317
  • 1
  • 4
  • 18
  • I don't see any code for scroll to top. You only added "#" on the `a` tag. This doesn't mean you can move to top. – Chase Choi Jun 03 '20 at 23:54
  • It does scroll the user to the top of the page though, it's just an ultra simple/basic form of it. If you check the CodePen it does work to take you to the top on click. – Kiki Jun 04 '20 at 00:04

1 Answers1

2

This code works only when scrolling with the mouse wheel. But there is a problem with it.

update() function is constantly being called when scrolling down (up works ok). This is because moving is always true (delta always > 0.5).

if (Math.abs(delta) > 0.5)

If you put a console.log there you will see it for yourself.

I can't actually understand why the 0.5 is selected as a value, but if you make it 1 it will work for both scroll up and scroll down.

To further see my point, if you leave it as it is (0.5), and try to just scroll a little bit up after you scroll all the way down, you will see that the button works without bouncing back down.

After you make it 1, smooth scroll continues to work for both directions, and when the button is pressed, it stays up.

BUT the scroll to top (with the button) is not smooth! That is expected because your js code only works for mousewheel event, not with the # you used.

Let me just say that if your intention is to have smooth scroll when you press the button, and don't care about the mousewheel, then you will be better off with something like this: css scroll-behavior or like this javascript scroll anchor without the need of your existing code.

If you want to keep the smooth scrolling when mousewheel is used, then you should use the javascript method from the above link, along side your existing code.

Also one more thing: If you press the button, before the scroll finishes (while easing out) it will jump to top and then it will bounce back where it was. That's expected, as js scroll code doesn't know anything about the button scroll behavior.

d3bgger
  • 339
  • 2
  • 12
  • Thanks, changing the 0.5 to 1 has indeed allowed me to scroll to top successfully. (I updated the CodePen to reflect this) The only thing now is when I am at the top after clicking scroll to top, the page has no idea I am now up there, and if I initiate any scrolling at all however small, it shoots me back to the bottom again. Also, yes its correct that I only want to focus the smooth scrolling on the mouse wheel, I don't mind if the back to the top is not smooth. – Kiki Jun 04 '20 at 01:19