You just need to instantiate a new scroller for that element.What i'm trying to achieve is to have a smooth scroll effect applied to a.

Zenscroll.to(about, 0) // 0 milliseconds = no smoothingĪnything you can do within the document you can also do inside a scrollable DIV or other element. Zenscroll.center(image2, 2000) // 2 seconds Zenscroll.to(about, 500) // 500ms = half a second If you pass a value of zero then the scroll happends immediately, without smoothing.Įxamples: zenscroll.toY(50, 100) // 100ms = 0.1 second You can specifically set the duration for each scroll function via an optional second parameter. The duration is automatically reduced for elements that are very close. The default duration is 999 which is ~1 second. You can work around this by using zenscroll.toY(). Note that a zero value for offset is ignored. Zenscroll.center(image2, duration, offset) (By default offset is the half of the element’s height.) var duration = 500 // milliseconds The top of the element will be upwards from the center of the screen by this amount of pixels. If you want you can also define an offset. Scrolls the element to the center of the screen zenscroll.center(image2) Tip: If you resize an element with a transition of 500ms, you can postpone calling zenscroll with that amount of time: ('is-small')ĥ. If the element is higher than the visible viewport then it will simply scroll to the top of the element, including the edge offset. Otherwise Zenscroll will try to make both top & bottom of element visible, if possible. If the element is already fully visible, with the edge offset at the top and bottom, then no scroll is performed. Scroll to a specific vertical position zenscroll.toY(50) You can globally override the default value by calling tup() (see below), or by providing the edgeOffset parameter when you create a scroller for a DIV, e.g., zenscroll.createScroller(myDiv, null, 20) 3. If you have a fixed navigation bar or footer bar then you probably need more than that. Note that Zenscroll intentionally leaves a few pixels (by default 9px) from the edges of the screen or scrolling container. Scroll to the top of an element var about = document.getElementById('about')

Alternatively, start with the path of the page.

Add the class noZensmooth to the anchor element, for example.If you want only some of the links to be excluded from the automatic smoothing then do one of the following: Exclude a link from the automatic smooth-scrolling In this case Zenscroll will only enable automatic smooth-scrolling in browsers which don’t support this feature yet (e.g., Internet Explorer).ġ.6. In new browsers if the scroll-behavior CSS property is set to smooth on the body (see above).If you set window.noZensmooth to a non-falsy value (see above).The automatic smooth-scrolling is completely disabled in the following cases: smooth-container ) which works in new browsers.ġ.5. 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. You can also get Zenscroll via npm: npm install zenscrollĮnabling native smooth-scrolling in the browser Important: You can only call Zenscroll when document.body is already available, so don’t try to call Zenscroll functions from the. Zenscroll will also work if you reference it in the but it is not recommended for performance reasons. A good place is at the very bottom, just before the closing tag. Limited support (programmatic animated scroll in document) tested and works under:ĭownload Zenscroll and include it into your page. Can use new browser’s built-in smooth-behavior if it’s enabled.Customize the duration of the individual scroll operations.Specify the spacing between the element and the edge of the screen (e.g., for fixed navigation bars and footers).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.Automatic smooth-scrolling on links within the same page, including back and forward navigation (Chrome, Firefox, Opera, Safari Technology Preview).It can also automatically smooth all scrolling within the same page. Zenscroll is a vanilla JavaScript library that enables animated vertical scrolling to an element or position within your document or within a scrollable element (DIV, etc.). Move elements into view, or scroll to any vertical position.ġ.4 kilobyte of vanilla JavaScript. Zenscroll - One JavaScript to Smooth-Scroll Them All ZenscrollĪbout Getting Started How to Use License One JavaScript to Smooth-Scroll Them All

Smoothscroll js demo