I was searching for a good pure Javascript implementation for animated scrolling to a target on click. Surprisingly, my google-fu was only able to come up with implementations dependent on jQuery. Thus I was forced to come up with my own solution and thought that it would be worth sharing. You can test the animation by clicking the subscript1.

For the tl;dr people, I’ve included the full code at the end. For the rest, I’ll walk you through the source.

I started with the relation between the navigation link and the section of page to navigate to. The best solution seemed to be to bind the navigation link to the id of the section header. There is an added bonus to this aspect: if the user for some reason has no access to Javascript, the link will still guide them correctly. I think that’s a big plus for accessibility.

The HTML would look like this. Note how the `a` element’s `href` attribute shares the id of the heading element.

Then we loop through the link elements to attach the click event listeners. I used an old-fashioned `for` loop.

The `scroll()` function doesn’t exist yet. That’s our next task!

There’s nothing fancy here – most of the cool stuff happens in the `animateScroll()` function that we’ll soon get into. Before calling the function however, there are three things we must do.

1. Prevent the default action of the click – that’s navigating straight to the target
2. Get a reference to the target element. We strip the “#” from the beginning of the `href` and call the `getElementById()` function of the `document` object with the result
3. Get the vertical displacement of the target element from the top. We pass this value to the `animateScroll` function

We’re now ready to move to the `animateScroll` function

This one’s takes a bit more effort. At first glance we see that there’s a plenty of variable definitions and an inner helper function. I’ve split the function into smaller pieces below to deal with them one by one. Let’s start with the variables.

On the first line we redefine the `targetHeight` parameter. The inline conditional looks a bit convoluted but what we do is basically pretty simple. We check if the target height is so close to the bottom of the page that it’s impossible to scroll so low that the target is at the top of the page. If that’s the case, we set the bottom of the page as the target.

After this we grab the current scroll position and set this to a variable. This is needed in the animation loop, as the user is not necessarily at the top of the page when clicking the link.

The `step_x` variables definition may seem a bit unexpected at first. What’s that pi doing in my Javascript? For a natural scrolling animation we’re going to need some trigonometry. The `step_x` variable will help us later when we get serious with the cosine function.

The `step-count` is used for – counting steps. We’ll be using the frame count as a cue for stopping the animation. The all-capital `SCROLL_DURATION` tells us the duration of the animation in frames. The all-caps signals that it’s a fixed constant value.

The `step()` function performs a single step of the animation. The line with the `window.scrollTo()` call is the actual page scrolling. In addition to that, we increment the `step_counter`, check if there are still frames left to animate and if so, well request another one, calling the function itself recursively.

Let’s look at the math used in the y-coordinate of the `scrollTo()` call. First of all we have the `initialPosition` value that we saved earlier. Then we have a rather complicated looking calculation. It might be easier to understand in the form of an equation (you can also skip the math if it feels like too much)

$y = y$0 + 1/4 * h (1 - cos(sx * x) )2

What we’re trying to accomplish here is to progress the scrolling along a cosine squared curve. This makes for a nice smooth transition in the style of Bezier curve. The curve starts at `initialPosition` and ends at `targetHeight`, as it should.

There’s one final thing that hasn’t been dealt with yet and that just happens to be the actual animation. As you can see, there are no `setTimeout()` or `setInterval()` calls in the code. Instead we are using the `requestAnimationFrame()` function2 that’s so useful in web animation that it justifies the horribly long name.

The function is used in two places in the code. Right after defining our variables in `animateScroll()` we call it with the `step()` function as callback to initialize the animation. After this every animation loop recursively calls for another frame to be rendered.

And so, we have animation! Is there a lesson to be learned from this? To me, the implementation task was a reminder of how tricky animation can be with pure Javascript. There are some great animation libraries available and I recommend using one. Working through the oddities may be fun and educational but usually the right choice is to stick with the best libraries when it comes to web animation.

1. Yeah, this one is just for demonstration. Click me to get back.

2. The animation method also is the reason for the one inconsistency in the code. How long does it take for the scroll animation complete? As a matter of fact, that depends on your monitor. The `requestAnimationFrame()` function calls a new frame based on the refresh rate of the hardware. That means that depending on your hardware, the animation duration can be for example half a second (30 frames / 60 Hz = 0.5 seconds) or barely a quarter (30 frames / 120Hz = 0.25 seconds). There are ways to find out the framarate by for example measuring it from two consecutive calls to `requestAnimationFrame()`. That, however shall be left for future development. I may one day post an update with the functionality added but in the mean time I recommend it as an exercise for the reader.