- Vanilla Js Modules
- Smooth Scroll Vanilla Js Tutorial
- Smooth Scroll Vanilla Js Extract
- Smooth Scroll Vanilla Js Wow
- Smooth Scroll Vanilla Js Wafers
- Js Scroll Animation
- Scroll To Anchor Vanilla Js
Scroll-to-top Button in vanilla JS (Beginners):
Check out my courses and become more creative! Here is a quick tutorial on how to do the smooth scroll effect in vanilla javascript. Demo: Vanilla JavaScript Smooth Scroll. Click any link to scroll to the target. Visit the tutorial » Example 1; Example 2; Example 3; Example 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo id est ut tincidunt. Sed vel ipsum sit amet leo fringilla ornare. Nam sed metus dapibus, efficitur eros id, varius nulla. One JavaScript to Smooth-Scroll Them All. Smooth animated scrolling. Move elements into view, or scroll to any vertical position. 1.4 kilobyte of vanilla JavaScript. No dependencies. View Zenscroll on GitHub About. Zenscroll is a vanilla JavaScript library that enables animated vertical scrolling to an element or position within your document.
Simple scroll-to-top button tutorial with smooth scrolling.
We need to:
- detect user scroll. A better finder attributes 5 35 download free.
- show scroll-to-top button after a certain amount of scroll.
- scroll to top when the user click on it.
- Just like we can detect click with a
click
event listener:
we can detect scroll with a
scroll
event listener:The function
handleScroll
is going to be called everytime the user scrolls.document.documentElement
returns the root element of the document. We need it to get the scroll values.We are saving it in a variable called
rootElement
for ease of use.Now what scroll values do we need?
- First we need the amount scrolled.
scrollTop gets the number of pixels scrolled vertically. So the amount scrolled is:
rootElement.scrollTop
.- Then we need the total amount of pixels we can scroll.
scrollHeight gives the height of an element including the not visible part due to overflow.
clientHeight gives the inner height of an element in pixels which is the height of the visible part.
By subtracting
scrollHeight
by clientHeight
we get the total amount of pixel we can scroll:scrollTotal
represents the maximum number of pixels that can be scrolled.- By dividing the amount scrolled by the total amount of pixels we can scroll, we get a ratio between 0 and 1. Playing with this ratio, we can easily toggle the button on and off.
For example, we will add a condition that is going to show the scroll-to-top button only when the user scrolled down 80% of the page which means when the ratio > 0.80.
- 0.80 is an arbitrary number. Basically, the closest we get to 1 the more the user has to scroll before seeing the button.
So now our javascript looks like this:
The hardest part has been done! Now we only need to toggle the button and scroll to top on click.
We are going to add a scroll-to-top button in the html:
And style it:
A few important points to note: Piezo 1 6 4 x 2.
position: fixed;
is used to get the button out of the flow of the page. Withbottom: 50px;
andright: 50px;
we make sure it sits at the bottom right corner.z-index: 100;
is used to keep it on top of every other elements.display: none;
is used to hide the button at first.
First we get the button in javascript with:
Then toggle the display depending on the ratio inside the
handleScroll
function:With that the scroll-to-top button appears and hides on scroll.
The last thing to do is scroll to top when we click on the button.
The last thing to do is scroll to top when we click on the button.
There a lot of scrolling examples that use jQuery. But these days it is really easy to do this in pure js.
First we need to add a
click
event listener to the scroll-to-top button:Then inside the
scrollToTop
function, we will make it scroll up with the scrollTomethod:The
scrollTo
method can take 3 options: left
, top
, behavior
.- left takes for value a number that represents the number of pixels along the X axis to scroll.
- top takes for value a number that represents the number of pixels along the Y axis to scroll. We set it to 0 to make it scroll to the top.
- behavior by default is set to auto which means immediate. We set it to smooth to get a smooth scroll effect.
And that’s it!
The final javascript file looks like this:
The final javascript file looks like this:
Thanks for reading ??!! I hope this was of help.
Improvements:
Here’s a few improvements that can be made:
- Save the 0.80 value in a variable at the top of the file. And call it something meaningful like TOGGLE_RATIO.
- Instead of toggling the display of the scroll-to-top button, we can toggle a class and add a bit of animation:
Here are the changes we made to
scrollToTopBtn
:display: none;
was removed.opacity: 0;
hides the button at first.transform: translateY(50px);
lower the button 50px on the Y axis from its original position.transition: all 0.3s ease;
is going to add an animation effect when we change the opacity and the translateY values.
We added the
showBtn
class that is going to be toggled in the javascript.- We show the button by toggling the opacity to 1:
opacity: 1;
. - With
translateY(0px)
, we get a slide-in effect because it goes from 50px to 0px.
All that’s left is to update the javascript code to toggle this class instead of display:
from Tumblr https://stupendoustaletheorist.tumblr.com/post/627305873151328256
About
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.). It can also automatically smooth all scrolling within the same page.
Features:
- Smooth animated vertical scrolling.
- Automatic smooth-scrolling on links within the same page, including back and forward navigation (Chrome, Firefox, Opera, Safari Technology Preview).
- Scroll to the top of a specific element.
- Scrolling an element into view, making sure both top & bottom are visible, if possible.
- Scroll to an element and center it on the screen.
- Specify the spacing between the element and the edge of the screen (e.g., for fixed navigation bars and footers).
- Customize the duration of the individual scroll operations.
- Callback when the scrolling is done.
- Can use new browser’s built-in smooth-behavior if it’s enabled.
- Just 1.4 kilobyte minimized & gzipped.
- No dependencies.
Full support tested and works under:
- Android Browser 2.2+
- Chrome for Android
- Chrome 14+ (probably earlier too)
- Edge
- Firefox 9+
- Internet Explorer 9+
- iOS Safari 4+
- Opera 10.6+ (probably earlier too)
- Safari 4+
- Windows Phone 8.1
- Yandex 14.12
Limited support (programmatic animated scroll in document) tested and works under:
- Firefox 3+
- Internet Explorer 6+
- iOS Safari 3+
Getting Started
Installing Zenscroll
Download Zenscroll and include it into your page. A good place is at the very bottom, just before the closing
</body>
tag. For example:Zenscroll will also work if you reference it in the
<head>
but it is not recommended for performance reasons. Important: You can only call Zenscroll when document.body
is already available, so don’t try to call Zenscroll functions from the <head>
.You can also get Zenscroll via npm:
Enabling native smooth-scrolling in the browser
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.,If this is set, Zenscroll will use built-in smooth-scrolling in capable browsers while still animating the scroll in older browsers. However, note that if you use the native smooth-scrolling then you loose the finer control options that Zenscroll offers: the speed settings of the animation, and the edge offset for links within the page. Only set this CSS property on the
body
or on the elements if you don’t need this level of control.Disabling automatic smoothing on local links
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 handlers will be installed. So make sure the setting comes before the loading of the script. For example:
(I consider the disabling of the automatic smooth-scrolling a rather rare scenario that’s why I install the event handlers by default.)
How to use
1. Automatic smooth-scroll to links within the page
If Zenscroll is included in your page it will automatically animate the vertical scrolling to anchors on the same page. No further setting is required. (Note that it can be disabled, see 1.5.)
Automatic smooth-scrolling works also with content you dynamically load via AJAX, as Zenscroll uses a generic click handler. Since the automatic smooth-scrolling is implemented a progressive enhancement, internal links work in older browsers as well.
1.1. Automatic edge offset adjustment on load
Zenscroll automatically adds the configured edge offset when the page is loaded with a hash suffix. For example, if you navigate to
'http://yoursite.com/#about'
then the scroll position will be not cut sharply at the top edge of the element with id='above'
. Instead, Zenscroll automatically adds the configured edge offset (which is 9 pixels by default, unless you changed it).No automatic adjustment happens in the following cases:
- If automatic smooth-scroll is disabled via
noZensmooth
or the native smooth-scrolling (see 1.5) - If edge offset was set to zero (e.g.,
zenscroll.setup(null, 0)
).
1.2. Limited support for smooth back & forward navigation
The scroll is also animated when the browser’s back and forward buttons or the relevant key combinations are used (or even if the navigation is invoked from JavaScript). Note that although Zenscroll remembers the vertical scroll position, it cannot calculate changes caused by browser window resizing or collapsing/expanding elements, etc.
This functionality requires browser support for
history.scrollRestoration
which is available for example in Chrome 46+, Firefox 46+, and Safari Technology Preview.1.3. Limited support for the hashchange
event and the CSS pseudo :target
The automatic smooth-scroll on local links can also trigger the standard
hashchange
event and the CSS pseudo-class :target
but only if you set the edge offset to 0. I had to introduce this limitation because otherwise the scrolling isn’t smooth. Network radar 2 5 2.So if you need
hashchange
or :target
then make sure you execute zenscroll.setup(null, 0)
.Vanilla Js Modules
1.4. No support for automatic scroll to elements inside scrollable elements
Zenscroll wants to be a lightweight solution for animated vertical scrolling, that works in most browsers. The automatic link-scrolling is even more focused on anchors that are directly inside the page body. Unfortunately it won’t scroll accurately to elements that are inside other scrollable elements (e.g.,
overflow: auto; max-height: 100px
). Don’t expect Zenscroll to re-implement the full functionality of the browser, with the recursive logic of traversing the nested scrollable elements.So, how to deal with a situation like this? Try one of the following methods:
- Exclude the problematic links from the automatic smooth-scrolling (see 1.6.).
- Or implement the special logic programatically (see 7. Scroll inside a scrollable DIV).
- Or don’t use Zenscroll at all. Instead, rely on the browser’s built-in scrolling, and enable the native smooth-scrolling (via
body { scroll-behavior: smooth }
) which works in new browsers.
1.5. Disable the automatic smooth-scrolling
The automatic smooth-scrolling is completely disabled in the following cases:
- If you set
window.noZensmooth
to a non-falsy value (see above). - In new browsers if the
scroll-behavior
CSS property is set tosmooth
on thebody
(see above). In this case Zenscroll will only enable automatic smooth-scrolling in browsers which don’t support this feature yet (e.g., Internet Explorer).
1.6. Exclude a link from the automatic smooth-scrolling
If you want only some of the links to be excluded from the automatic smoothing then do one of the following:
- Add the class
noZensmooth
to the anchor element, for example<a href='#about'>
- Alternatively, start with the path of the page. E.g., instead of writing
<a href='#about'>
use<a href='/#about'>
or<a href='index.html#about'>
.
2. Scroll to the top of an element
Note that Zenscroll intentionally leaves a few pixels (by default 9px) from the edges of the screen or scrolling 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 by providing the edgeOffset
parameter when you create a scroller for a DIV, e.g., zenscroll.createScroller(myDiv, null, 20)
3. Scroll to a specific vertical position
4. Scroll an element into view
If the element is already fully visible, with the edge offset at the top and bottom, 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, including the edge offset.
Tip: If you resize an element with a transition of 500ms, you can postpone calling zenscroll with that amount of time:
5. Scrolls the element to the center of the screen
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.)
Note that a zero value for offset is ignored. You can work around this by using
zenscroll.toY()
.6. Set the duration of the scroll
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. If you pass a value of zero then the scroll happends immediately, without smoothing.
Examples:
7. Scroll inside a scrollable DIV
Anything you can do within the document you can also do inside a scrollable DIV or other element. You just need to instantiate a new scroller for that element. I will also fall back by default to the native browser smooth-scrolling if available (which can be overridden via
setup()
).Important: the container DIV must have its
position
CSS property set to relative
, absolute
or fixed
. If you want to keep it in the normal document flow, just assign position: relative
to it via a class or a style
attribute, like in the example below:Obviously you can use all other scroll functions and parameters with the scrollable container. Two more examples:
8. Execute something when the scrolling is done
You can provide a callback function to all four scroll functions, which is executed when the scroll operation is finished. For example, you change some UI elements but first you want to make sure that the relevant elements are visible.
Note that the callback is immediately invoked if the native scroll-smoothing is enabled (see above).
If you look at the source code of the examples under Scroll inside a scrollable DIV they are actually implemented like this:
So first the container (with ITEM 1 to ITEM 7) is scrolled into view if necessary, and then the scrolling inside the container is performed. Try scrolling out the above container and then hit one of the ‘Play’ buttons above to see how it works.
This works with all four scrolling functions. The
onDone
parameter is always the last parameter:Smooth Scroll Vanilla Js Tutorial
to(element, duration, onDone)
toY(y, duration, onDone)
intoView(element, duration, onDone)
center(element, duration, offset, onDone)
9. Change settings
It’s easy to change the basic parameters of scrolling:
- You can set the default value for duration. This will be valid for internal scrolls and all your direct scroll calls where you don’t specify a duration.
- Change the edge offset (the spacing between the element and the screen edge). If you have a fixed navigation bar or footer bar then set the offset to their height.
You can change custom scrollers similarly:
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: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:
The function always returns the current values in an object, so even if no parameters are passed you can obtain the current settings:
10. Additional functions
Smooth Scroll Vanilla Js Extract
To check whether a scroll is being performed right now:
Smooth Scroll Vanilla Js Wow
To stop the current scrolling:
To get the current vertical scrolling position:
To get the top position of an element within the body or a scroller:
Impotant: the returned value is without edge offset, and without recurcursively calculating nested scrollable containers.
Smooth Scroll Vanilla Js Wafers
License
Js Scroll Animation
Public Domain. You can do with it whatever you want and I am not responsible for anything.
About Me
My name is Gabor Lenard. You can find me on Twitter as @zengabor. I am a product designer & maker, currently building zenvite.com. It never ceases to amaze me how people share their knowledge and what they make. Their work empowers us all. This here, however humble, is my way of contributing to this community & the wonderful continuum we call the world wide web.
Other projects by me:
Scroll To Anchor Vanilla Js
- Zenfonts, a tiny JavaScript helper for @font-face web font loading.
- Zenvite.com: Create invitation pages & get everybody on the same page.