O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Smoothening the scroll

Let's work on the smoothScrollTo function. This is the function that detects the scrolling motion to make sure it is smooth. The smoothScrollTo function is used to move the scroll to the bottom of the page when the page loads. You could use this function in other scenarios to click a button where its click event uses the function to go to a specific section. In our case, we only want to go straight to the bottom. Let's take a look at the function.

Inside its braces, create a callback function. The first line should list the variables time, start, and factor, left undefined. Next, create a return function, injecting the variables target and duration. Let's take a quick look at what we have so far:

 window.smoothScrollTo = (function ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required