With that the scroll-to-top button appears and hides on scroll. The last thing to do is scroll to top when we click on the button. Scroll to top There a lot of scrolling examples that use jQuery. But these days it is really easy to do this in pure js. First we need to add a click event listener to the scroll-to-top button.
I published this article years ago. At the time of writing, this solution was working very well for me. Today I would be using
window.scroll
and this lightweight smooth scroll behavior polyfill instead.How many times have you seen the effect of a page scrolling down after clicking a button? Probably thousands! It’s always been extremely easy to do with the popular jQuery library.
It is a decent solution, works great and it’s really well supported across the browsers. But there is a recent trend of abandoning jQuery because pure vanilla JavaScript DOM manipulation is the new hipster skill (I’m one of those hipsters by the way). With the ease of modern APIs and the amount of features that the JavaScript landscape has to offer nowadays it is not that difficult to leave chunky libraries behind.
- Smooth Scroll With Easing Functions – smooth-scroll. A lightweight, fast JavaScript library which.
- One JavaScript to Smooth-Scroll Them All. Smooth animated scrolling. Move elements into view, or scroll to any vertical position. 1.4 kilobyte of vanilla JavaScript. No dependencies. View Zenscroll on GitHub About. Zenscroll is a vanilla JavaScript library that enables animated vertical scrolling to an element or position within your document.
On one recent project my client asked me to implement this kind of scrolling on his SPA (single page app). Aha! A “challenge” I said! Today I think “DOM-nightmare-inconsistency-mission” is a better term to describe this scenario. If you are one of those hipsters let me save you a couple of hours and share this tiny snippet with you.
Page scrolling without jQuery #
Plan! To start a script it’s always a good idea to have a plan in place. Basically it goes like this:
- Determine where to scroll, the duration, the easing function and an optional callback.
- On click — grab a timestamp and the current document position.
- Scroll to the element as long as you don’t reach the destination.
- If the element has finished scrolling trigger an optional callback function.
Determine where to scroll, the duration, the easing function and an optional callback #
All the other steps are always going to be exactly the same. This one may vary depending on the destination, the scrolling duration, the timing function and any callback that is invoked when the scrolling reaches it’s destination. It makes sense to pass all these things as function arguments, right? The destination is the only required argument (ideally it should be a number or DOM element, and function should determine how to deal with it). The duration and easing function possess some sensible default values (thanks to ES2015 default arguments) and the callback function should be optional. Have a look at the wrapper of our function declaration.
On click — grab a timestamp and the current document position #
To calculate values for function that is responsible for scrolling window position up and down, we need to have a reference to initial window value and timestamp.
Scroll to the element as long as you don’t reach the destination #
The most popular JavaScript animation solutions are mainly based on setTimeout, setInterval, the WEB Animation API and requestAnimationFrame. The first two are pretty old school. The Web Animation API isn’t made to deal with these kind of situations — read more about it in one of my previous articles. So
requestAnimationFrame
looks like a perfect candidate for this scenario. We have to be careful tho — it is easy to generate infinite loop if we request a frame loop without providing condition to terminate it. One of those situation can be scrolling below available scrollable window space. Luckily it is not difficult to prevent it. In case that requestAnimationFrame
is not available we can just skip animation and move window to the destination. Have a look…If the element has finished scrolling trigger an optional callback function #
The last step is to trigger a callback function whenever the document reaches its destination. This requires adding one more line to the condition that checks the current position and destination inside the
scroll
function.Putting it all together #
Smooth Scroll Vanilla Js Wafers
The whole function looks like this.
…and to invoke it
or simply
A future solution using scroll-behavior: smooth #
UPDATE! As correctly pointed out by Šime Vidas there is another solution. There is a property of the CSSOM View module called
scroll-behavior
. This is a native solution for the problem that I’m trying to solve by my script. The implementation is extremely easy, but unfortunately this method isn’t supported well enough to be used reliably (yet). It doesn’t allow us to control timing functions or the duration either. It takes the user-agent values as its defaults. If you want to test examples below, use Firefox or Google Chrome with Experimental Web Platform features flag enabled.And one more example using just a CSS (Firefox only)
![Vanilla js on ready Vanilla js on ready](https://i0.wp.com/www.cssscript.com/wp-content/uploads/2018/07/Smooth-Interactive-Inner-Zoom-In-Vanilla-JavaScript-focus.js-min.png?fit=654%2C439&ssl=1)
Wrap it up #
Javascript Smooth Scroll To Top
Please let me know what you think about my solution. I know that the browser support isn’t that amazing compared to the usual jQuery solution. The compromise between browser support, bloating code and performance is a question that you need to answer yourself depending on your project. I had good fun building this script but it’s even more enjoyable for me to share it with you.
Please enable JavaScript to view the comments powered by Disqus.comments powered by