☰

Smoothscroll

Smooth scrolling on pages using javascript

Author
winceptor
Daily installs
0
Total installs
3,009
Ratings
34 3 0
Version
12
Created
2014-12-16
Updated
2024-01-18
License
N/A
Applies to
All sites

Script to add smooth scrolling on every page using javascript.

Use this for example if your browser does not have smoothscroll natively.

Tested in Chrome, Maxthon and Firefox.

Post feedback or I won't know what you think or want. Initially I created this for my personal use because smooth scrolling in Maxthon did not work for me.

I'm still updating this when I find something to improve or find bugs. (Since I still use this myself)

UPDATE (01.11.2016):

Removed jQuery because of how often it conflicted with stuff on webpages. Now uses purely javascript of it's own and is much better overall. Try it out!

UPDATE (08.03.2018):

Completely rewrote this script due to how unmanageable the old version was. Should be much better now in both performance and visual appearance. Settings can be changed inside script for now until i make better settings page for this.

There are for now 2 parameters you can change:
*Smoothscroll.Smoothness - default 0.5, change to 1.0 or higher for smoother animation.
*Smoothscroll.Acceleration - default 0.5, change for higher acceleration

Don't increase those values too much though.

UPDATE (18.5.2019):

Reworked animation functions to use requestAnimationFrame, instead of trying to reproduce same functionality using timers. This results into much more consistent and better animations and smoother scrolling.
You dont need to change Refreshrate setting anymore either, it is calculated automatically and used internally.

UPDATE (19.5.2019):

I decided to put a short video about how this looks. So here you go:



UPDATE (16.5.2021):

Using now element.scrollBy method where possible, possibly improves something?

UPDATE (28.8.2021):

Stopped using scrollBy for now because it messes up some pages scroll badly.

UPDATE (18.1.2023):

Added back calculation of framerate and did some changes to how scroll is animated.
Animation will normally use requestAnimationFrame then setTimeout if fps is too low and finally turn off entirely if its way too low to animate.
By default 60 fps is baseline and anything higher is good and automatically used for animation, below 30fps timer is used, and below 15fps animation turns off.

UPDATE (18.1.2023) (regression)

Removed setTimeout switching as it is inconsistent with renderign cycles. Instead changed the fps calculation into the animation method loop itself, using Framerate parameter as initial value.