Smoothscroll JS Demo

Are you tired of jarring page jumps when navigating through your website? Do you have a fixed navigation bar or footer bar that makes it difficult to implement smooth scrolling? Look no further than Zenscroll, a vanilla JavaScript library that enables animated vertical scrolling to an element or position within your document or scrollable element.

How Does It Work?

Zenscroll intentionally leaves a few pixels (by default 9px) from the edges of the screen or scrolling container. This allows you to customize the spacing between the element and the edge of the screen, making it perfect for fixed navigation bars and footers.

You can start by scrolling to the top of an element using `document.getElementById('about')`. Alternatively, you can use the path of the page to specify where you want to scroll. If you want only some of the links to be excluded from the automatic smooth-scrolling, simply add the class `noZensmooth` to the anchor element.

Customization Options

With Zenscroll, you have a range of customization options available. You can:

* Exclude specific links from automatic smooth-scrolling

* Set the duration of individual scroll operations

* Specify the spacing between elements and the edge of the screen

* Scroll to an element and center it on the screen

* Scrolling an element into view, making sure both top & bottom are visible, if possible

* Scroll to the top of a specific element

Native Smooth-Scrolling

If you want to leverage native smooth-scrolling by the browser (currently available in Firefox 36+ and Chrome 49+), simply set the `scroll-behavior` CSS property to `smooth` on the body and on the elements you want to scroll.

Getting Started with Zenscroll

To get started with Zenscroll, download the library and include it into your page. You can also use new browser's built-in smooth-behavior if it's enabled. With Zenscroll, you only need to write a few lines of code to achieve smooth scrolling effects.

Zenscroll is a powerful vanilla JavaScript library that enables animated vertical scrolling to an element or position within your document or scrollable element. With its range of customization options and native support for browser-based smooth-scrolling, Zenscroll is the perfect solution for creating a seamless user experience on your website. Try it out today!

Smoothscroll js demo