How to add smooth scrolling to a site: step-by-step instructions
Smooth scrolling on a website is a function of scrolling a web page up or down by scrolling the mouse wheel or using your fingers on the touch screen. At the same time, you can observe such a visual effect as smoothness (instead of instant and sharp movement), which in turn makes viewing the site's content more attractive and convenient for users. Today I will give you a short tutorial on how to add smooth scrolling to your site.
How to add smooth scrolling to the site?
To do this, we will need to connect the following JavaScript in the site (or page) template, namely between the tags <head> </head> :
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>In addition, you can also add the following code (below the previous one) to quickly and conveniently make changes to the smooth scroll settings to suit your needs:
<script>
SmoothScroll({
animationTime : 800,
stepSize : 75,
accelerationDelta : 30,
accelerationMax : 2,
keyboardSupport : true,
arrowScroll : 50,
pulseAlgorithm : true,
pulseScale : 4,
pulseNormalize : 1,
touchpadSupport : true,
})
</script>
| Option | Value |
|---|---|
animationTime |
Scroll time (400 = 0.4 seconds) |
stepSize |
Step size in pixels |
accelerationDelta |
Acceleration |
accelerationMax |
Maximum acceleration |
keyboardSupport |
Keyboard support (false if not) |
arrowScroll |
Scroll step with keyboard arrows in pixels |
touchpadSupport |
Touchpad support (false if not) |
I hope you managed to decorate your site with this wonderful effect of smooth scrolling, but if you have difficulties with this or for unknown reasons the script did not work - please ask questions and I will help you solve this problem 😉
