INTRODUCTION
THE PURE SIMPLE WAYS
Welcome to a tutorial on how to create a simple scroll animation. We live in an age of modern technology, and while we kind of expect scroll animation to be an easy thing, there is sadly not a “universal easy” way to do smooth scroll yet. So in this guide, we will walk through how to implement that smooth scroll animation on your webpage in 3 different ways – With CSS and Javascript, without the use of any 3rd party libraries. Read on!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
Related Articles
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Method 1 | Method 2 | Method 3 |
Extra | Closing |
METHOD 1
CSS SCROLL
Let us start with the easier solution of the three – Using one single line of CSS to do smooth scroll.
THE CSS MAGIC
CSS Scroll Animation
Go to bottom
Go to top
Yep. That scroll-behavior: smooth on the body is actually all you need. The good news is that the scroll-behavior is supposed to be the “official” implementation, but the bad news is that not all browsers have adopted it – So you decide for yourself if you want to use this method.
METHOD 2
JAVASCRIPT SCROLL
If you want to scroll a page programmatically, here is how to do it with Javascript – Scroll to a text field that the user missed out when filling a form maybe?
THE HTML
JS Smooth Scroll Demo
Go down to exactly 800 pixels from the top
Go to bottom
Go up 300 pixels from this element
Go to top
THE JAVASCRIPT
function goToID(id) {
// goToID() : scroll to element with the given ID
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
});
}
function goToPixel(pix) {
// goToPixel() : go to the exact given pixel from the top
window.scroll({
top: pix,
left: 0,
behavior: 'smooth'
});
}
function goBy(pix) {
// goBy() : scroll with reference to the current element
window.scrollBy({
top: pix,
left: 0,
behavior: 'smooth'
});
}When it comes to scrolling, there are 3 main functions that you have to know in Javascript – scroll, scrollBy, and scrollIntoView.
scrollorscrollTowill go to your exact specified position on the page.scrollBywill scroll with reference to the current position.scrollIntoViewwill go to your specified element.- Finally, you need to put in the
behavior: 'smooth'option, or there will not be any animations.
But as you can guess again – These are implemented in most modern browsers, with the exception of some browsers not fully adopting it.
METHOD 3
JAVASCRIPT FALLBACK
Special thanks to some “modern” browsers for not adopting the good solutions, this is the fallback and traditional old reliable method.
THE HTML
JS Smooth Scroll Demo
Go to bottom
Go to top
THE JAVASCRIPT
function sscroll(id) {
// sscroll() : smooth scroll
// PARAM id : target element ID to scroll to
// Get current Y position + target Y position
var fromY = self.pageYOffset ? self.pageYOffset : document.body.scrollTop ;
var target = document.getElementById(id);
var toY = target.offsetTop;
while (target.offsetParent && target.offsetParent != document.body) {
target = target.offsetParent;
toY += target.offsetTop;
}
// Scroll parameters
var speed = 10, // Less = faster
step = 30, // Less = smoother but slower
click = 0;
// Scroll animation - downwards
if (fromY toY) {
setTimeout("window.scrollTo(0, " + toY + ")", click * speed);
} else {
setTimeout("window.scrollTo(0, " + i + ")", click * speed);
}
click++;
}
}
// Scroll animation - upwards
else {
for (var i=fromY; i>=toY; i-=step) {
if (i-step How this script does scroll animation is actually pretty simple:
- The current and target Y-positions are first calculated.
- Then we set a whole series of
scrollTothat will slowly move towards the target. - Of course, we set timers
setTimeouton the scroll at different timings, so that it will appear to be a smooth animation. - Yep, that is the whole gist of it, and the rest are all Math calculations.
EXTRA
DOWNLOAD & MORE
That’s all for the code, and here is the download link as promised – Plus a summary of all the methods.
SUMMARY
- The easiest way to do scroll animation is to add
scroll-behavior: smoothto thebodyin CSS, but it is not supported by all browsers. - To do it programmatically, we can use
scrollIntoView,scroll, andscrollBycombined with abehavior: 'smooth'option. scrollIntoViewwill scroll to a specified element.scrollBywill scroll by a number of pixels, relative to the current position.scrollorscrollTowill move to the exact specified position on the page.- For fallback, use a series of
scrollwithsetTimeout, so that it will appear to slowly move towards the target.
SOURCE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!
The post 3 Ways to Do Simple Scroll Animation (CSS & Javascript) appeared first on Code Boxx.
