Check out my courses and become more creative!
https://developedbyed.com
Here is a quick tutorial on how to do the smooth scroll effect in vanilla javascript. Browser support is really good for the request animation animation so I wouldn’t worry about it too much. Hope you guys enjoy this Javascript tutorial.
Links:
Ease functions : http://www.gizma.com/easing/
Request time frame : https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
-~-~~-~~~-~~-~-
Follow my Twitter:
https://twitter.com/DevEd94
Please watch: “Should You Become A Software Engineer?”
https://www.youtube.com/watch?v=V_kTl0eIJ4A
-~-~~-~~~-~~-~-
Original source
26 responses to “Vanilla Javascript Smooth Scroll Tutorial”
Really nice tutorial, but I faced the following error: when I used the code with a navbar which contained the links as nav-items. the function wouldn't scroll properly.
The error occured, because the .getBoundingClientRect().top function already returns the distance to the selector based on the window.y position.
So when you click a nav-link twice the second time your targetPosition is equal 0 while your startPosition stays the same e.g 1200
=> distance = targetPosition(0) – startPosition(1200) = -1200 which scrolls back your window to the very top which is of course not right.
Basically we don't need the distance variable instead we should change the ease parameter distance to targetPosition
=> var run = ease(timeElapsed, startPosition, targetPosition, duration);
If you want to use the code with a navbar I would also recommend to subtract your navbar-height from the targetPosition variable.
Why not use
window.scrollTo({
top: 1f00,
left: 0,
behavior: 'smooth'
});
Hello Dev, I've really enjoyed your tutorial. I'm a beginner in javascript. I followed your code but lost it at the end. I've coded exactly as you did. But upon clicking smooth scroll isn't working but without click event, it works fine when reloading the website every time. Here is my code (part I think is wrong). Your help will be much appreciated.
var section1= document.querySelector('.first');
var section2= document.querySelector('.second');
section1.addEventListener('click',function(){
smoothScroll('.second',2000);
});
section2.addEventListener('click',function(){
smoothScroll('.first',2000);
});
Excelent tutorial. I`ve changed only one thing. The target.getBoundingClientRect().top to target.offsetTop : )
veri good! thx !
Great video. There is an issue with this function though as Brian Cook has point out below.
Please change the targetPosition variable to this:
var targetPosition = target.getBoundingClientRect().top + window.pageYOffset;
The problem is that the function doesn't take into account when you have already scrolled down the page. It calculates the scroll distance as if it were at pageYOffset = 0 every time.
But this is still a great video and was super helpful! thank you for all your hard work Dev Ed.
One small addition to the code 🙂
Beside what Michal Wagner said (I was also struggling and figured that I need to change distance to targetPosition), I wrote this to make all links with # in the href scroll to the desired target (with the same id as the href value) without the need to call the function for each individual element.
So, after your code, write:
//get all the links on the page containing # in the href (^= means starting with)
const anchorLinks = document.querySelectorAll('a[href^="#"]');
anchorLinks.forEach((link) => {
// get the target element by getting the href value from each link
let scrollTarget = link.getAttribute('href');
// for clicking on any of the links
link.addEventListener('click', (e) => {
// we need to prevent default behaviour which would be just jumping to the element without scrolling
e.preventDefault();
// call your fancy animated scroll function
smoothScroll(scrollTarget,1000);
})
});
Thanks for the video!
Cheers!
Great Video Thank You
The distance is simply the targetPosition, not minus startPosition.
this is not working in multiple sections 🙁
This is not well explained.
I found easier way to make your website responding in the same way
html {
scroll-behavior: smooth;
}
Does it have any relation in what've done?
Btw, well done.
Every time I clicked on "bring me down" nothing happened. I copied every code posted here. I'll try again later. Thanks for these projects!!
It's great but you can do the same effect without javascript.
HTML
<a href="#content">Click to scroll</a>
<section id="home">
// put content here
</section>
<section id="content">
// put another content here
</section>
CSS
html {scroll-behaivor:smooth;}
And thats all
Wtf is the ease function?
Something wrong with the display: flex; property.
The elements are not centered.
Thank you you tutorial is really helpful, but you don't need to calculate the distance with a substraction because target.getBoundingClientRect().top; is the distance from above the window (relative to the current scroll) to the Y coordinate of the target in the window
Ed, This video was awesome, thanks for your distribution dude 🙂
Hey Ed please make a video on one page web app design.
This is very helpful, Ed. I'll be integrating this into a website I'm currently creating. Thanks a lot.
hi, how can i use one header for all my html pages? something in html( or css, js) equivalent of include in php? so i don't need to copy and paste in each page and when have some changes to do i just change one file?
thanks for your tutorial
what about for navigation position fixed on top? it's not work properly. i must scroll up first then click the other links
first video tutorials that i can actually understand from start to end. Thank you!
Is it possible to do 5 different Nav links to scroll different areas using this method? How can I do it?
idk why but that pause for the a lot of math comment has my dying lol
Hi Lorena 😂
Are you sure you’re in the correct user account?