Zenscroll is a lightweight JavaScript library that provides smooth, customizable scrolling animations for web pages. It allows developers to easily scroll to specific elements or positions within a page with smooth animations.
Smooth Scrolling to an Element
This feature allows you to smoothly scroll to a specific element on the page. In this example, clicking a button with the ID 'myButton' will smoothly scroll the page to an element with the ID 'myTarget'.
document.getElementById('myButton').addEventListener('click', function() {
zenscroll.to(document.getElementById('myTarget'));
});Smooth Scrolling to a Y Position
This feature allows you to smoothly scroll to a specific Y position on the page. In this example, clicking a button with the ID 'myButton' will smoothly scroll the page to the Y position 500.
document.getElementById('myButton').addEventListener('click', function() {
zenscroll.toY(500);
});Customizing Scroll Duration
This feature allows you to customize the duration of the scroll animation. In this example, the scroll duration is set to 1000 milliseconds (1 second). Clicking the button with the ID 'myButton' will smoothly scroll to the element with the ID 'myTarget' over 1 second.
zenscroll.setup(1000, 0);
document.getElementById('myButton').addEventListener('click', function() {
zenscroll.to(document.getElementById('myTarget'));
});Centering the Element
This feature allows you to smoothly scroll to an element and center it in the viewport. In this example, clicking a button with the ID 'myButton' will smoothly scroll the page to center the element with the ID 'myTarget'.
document.getElementById('myButton').addEventListener('click', function() {
zenscroll.center(document.getElementById('myTarget'));
});Smooth Scroll is a lightweight script that animates scrolling to anchor links. It provides similar smooth scrolling functionality but focuses on anchor links and offers more customization options for easing and offset.
Scroll Behavior Polyfill is a polyfill for the CSSOM View Scroll Behavior specification, which provides smooth scrolling behavior for browsers that do not support it natively. It offers similar smooth scrolling capabilities but is implemented as a polyfill for native browser behavior.
React Scroll is a library for smooth scrolling in React applications. It provides similar functionality to Zenscroll but is specifically designed for use with React, offering hooks and components for smooth scrolling in React projects.
Smooth animated scrolling. Move elements into view, or scroll to any vertical position.
1 kilobyte of pure JavaScript. No dependencies.
Zenscroll is a vanilla JavaScript module that enables animated vertical scrolling to any element or any position within your document or within a DIV or other scrollable container.
Features:
Full support tested and works under:
Limited support (programmatic animated scroll in document) tested and works under:
Download Zenscroll and include it into your page. A good place is at the very bottom, just before the closing </body> tag. For example:
...
<script src="zenscroll-min.js"></script>
</body>
You can also use npm to get Zenscroll:
npm install zenscroll
If you want to leverage the native smooth-scrolling by the browser (currently available in Firefox 36+ and Chrome 49+) then set the scroll-behavior CSS property to smooth on the body and on the elements you want to scroll. E.g.,
body, .smooth-container { scroll-behavior: smooth }
In this case the browser already does native smooth scrolling which is probably more efficient so Zenscroll uses that automatically.
However, note that if you enable native smooth-scrolling then you loose the finer control options that Zenscroll offers: the speed of the animation, and the edge offset. So only set this CSS property on the body or on the elements if you don’t need this level of control.
If you want to use Zenscroll programmatically but you don’t need the automatic smoothing on local links then set window.noZensmooth to a non-falsy value. In this case the event handler for automatic smoothing is not installed but you can still use everything, like zenscroll.intoView(), etc. It’s important to set this value before Zenscroll is executed, otherwise the handler will be installed. So make sure that setting the variable comes before the loading of the script. For example:
...
<script>window.noZensmooth = true</script>
<script src="zenscroll-min.js"></script>
</body>
(I consider this a rare scenario that’s why I keep the default behavior of installing the event handler.)
If Zenscroll is included in your page it will automatically animate the scrolling to anchors on the same page.
However, automatic smooth scrolling is not enabled in these two cases:
window.noZensmooth to a non-falsy value (see above).scroll-behavior CSS property is set to smooth on the body (see above).If you want only some of the links to be excluded from the automatic smoothing then start with the path of the page. E.g., instead of writing <a href="#about"> use <a href="/#about">.
Automatic smooth scrolling works with content you dynamically load via AJAX, as Zenscroll uses a generic click handler. Internal links are intentionally not added to the history to save the users from having to hit the Back button too many times afterwards. Since the automatic smooth-scrolling is implemented a progressive enhancement, all internal links still work even in old browsers.
var about = document.getElementById("about")
zenscroll.to(about)
Note that Zenscroll intentionally leaves a few pixels (by default 9px) from the edges of the screen or scolling container. If you have a fixed navigation bar or footer bar then you probably need more than that. Or you may want to set it to zero. You can globally override the default value by calling zenscroll.setup() (see below) or with the edgeOffset parameter of the constructor when you create a scroller for a DIV.
zenscroll.toY(50)
If the element is already fully visible then no scroll is performed. Otherwise Zenscroll will try to make both top & bottom of element visible, if possible. If the element is higher than the visible viewport then it will simply scroll to the top of the element.
zenscroll.intoView(image1)
Tip: If you resize an element with a transition of 500ms, you can postpone calling zenscroll with that amount of time:
image.classList.remove("is-small")
setTimeout(function () {
zenscroll.intoView(image2)
}, 500)
zenscroll.center(image2)
If you want you can also define an offset. The top of the element will be upwards from the center of the screen by this amount of pixels. (By default offset is the half of the element’s height.)
var duration = 500 // miliseconds
var offset = 200 // pixels
zenscroll.center(image2, duration, offset)
Note that a zero value for offset is ignored. You can work around this by using zenscroll.toY().
The default duration is 999 which is ~1 second. The duration is automatically reduced for elements that are very close. You can specifically set the duration for each scroll function via an optional second parameter. (Note that a value of zero for duration is ignored.)
Examples:
zenscroll.toY(50, 100) // 100ms == 0.1 second
zenscroll.to(about, 500) // 500ms == half a second
zenscroll.center(image2, 2000) // 2 seconds
Anything you can do within the document you can also do inside a scrollable element. You just need to instantiate a new scoller for that element. It also falls back by default to the native browser smooth-scrolling if available (which can be overridden via setup()).
Example:
<div id="container">
<div id="item1">ITEM 1</div>
<div id="item2">ITEM 2</div>
<div id="item3">ITEM 3</div>
<div id="item4">ITEM 4</div>
<div id="item5">ITEM 5</div>
<div id="item6">ITEM 6</div>
<div id="item7">ITEM 7</div>
</div>
<script>
var defaultDuration = 500
var edgeOffset = 4
var myDiv = document.getElementById("container")
var myScroller = zenscroll.createScroller(myDiv, defaultDuration, edgeOffset)
var target = document.getElementById("item4")
myScroller.center(target)
</script>
Obviously you can use all other scroll functions and parameters with the scrollable container. Two more examples:
myScroller.toY(35)
myScroller.intoView(target, 750)
It’s easy to change the basic parameters of scrolling:
var defaultDuration = 777 // ms
var edgeOffset = 42 // px
zenscroll.setup(defaultDuration, edgeOffset)
You can change custom scrollers similarly:
myScroller.setup(500, 10)
If you don’t want to change a value just omit the parameter or pass null. For example, the line below sets the default duration, while leaving other settings unchanged:
zenscroll.setup(777)
Sets the the spacing between the edge of the screen (or a DIV) and the target element you are scrolling to, while leaving the default duration unchanged:
zenscroll.setup(null, 42)
To check whether a scoll is being performed right now:
var isScrolling = zenscroll.moving()
To stop the current scrolling:
zenscroll.stop()
Public Domain. You can do with it whatever you want and I am not responsible for anything.
FAQs
A module to smooth-scroll web pages and scrollable elements (like DIVs)
The npm package zenscroll receives a total of 263,029 weekly downloads. As such, zenscroll popularity was classified as popular.
We found that zenscroll demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.