Smooth Scroll with JavaScript
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- The smooth scrolling effect, helps improve User Experience (UX) while navigating through different locations in a Web Page.
Learn how to add, cross-browser compatible, smooth scrolling to your Web Pages with Vanilla JavaScript.
Table of Contents:
00:00 Introduction
06:45 Approach #1 - window.scrollTo(options)
11:35 Approach #2 - element.scrollIntoView(options)
16:25 Approach #3 - window.requestAnimationFrame(callback) & window.scrollTo(x-coord, y-coord)
Code for this Project: codepen.io/Coding_Journey/pen...
Easing Functions: gizma.com/easing/
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Responsive Navbar with HTML, CSS and JavaScript: • Responsive Navbar with...
Smooth Scroll with CSS: • Smooth Scroll with CSS
JavaScript Loops: • JavaScript Loops
Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
![[#SHORTS CLIP] ครูอึ้ง กรรมการอึ้ง ฮ่าๆ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/qeBTuMJs4t0/mqdefault.jpg)
I’m glad you scrolled into my view today lol. I’ve learned so much from this lesson + tour and enjoyed it a whole lot. It was detailed and simple to follow. Thanks for keeping it plain JS, and sharing great insights about the performance and browser compatibility.
Heh 😉 Thank you so much for the lovely message 🙂 Have a wonderful new year...and keep coding 😉💙💙
Thank you sooooo much my friend. I love your detailed explanation about how everything works. Wish more people could teach with that style.
There's nothing worst than someone writing the code and not explaining the reason they wrote it. God Bless!!! Thank you.
Thank you for the lovely comment! Very glad to hear you've found this useful 🙂 Keep coding!! 😉
Great video. Thank you for the thorough explanation.
Excellent teaching method. Very thorough explanation. Thank you for this.
Thank you very much, my friend! This video was really helpful! With those few lines of code I avoided having to use a JS library :)
Awesome video dude! Comprehensive, clear. Loved running through the docs and the debugging part for IE as well. Very handy to see. Thanks :D
Oooooh thank you so much for the nice words :) Glad you got some value out of this video! Keep it up!!!
Very nice video, thanks a lot!
Very useful, thanks for sharing!
thank you forgive me the most important issue on JavaScript.
My pleasure 🙂 Glad you liked it!!
yeah !
I had time searching for the solution.
thanks for sharing man!
this is great video.
keep up the good work man, stay awesome!
Thank you for the kind words man! Glad you liked it. Keep coding!!
Loved it!!
That was great bro.
Clear and coll! Thank you!
Thanks man! Glad you liked it!!
Nice editing & commentary!
Thank you Benjamin! Btw, love your channel keep it up!!!
Amazing!!! Just amazing!!!
🙂🙏
Thank you very much, I found this video very useful. I tested it on Explorer 11 and on local server the smooth 'behavior' didn't work. Looking at your URL bar when you clicked brand and links, I noticed that you tested it online. So I did it and it worked. Great!!!
Thanks Roberto, that's awesome! Here, I'm using the Visual Studio Code editor Live Server extension which launches a development local server with live reload feature for static & dynamic pages. Keep up the good work!!
Wow, thank you for your work. Your videos are so useful
Oh thank you!! Very glad you like them 🙂💙
Thank you for sharing this! It was really helpfull =D
Amazing! Very very glad to hear that 🙂
nice tutorial! very helpful!
Thanks man, glad you liked it 🙂
Just perfect thank you
Thanks man! Very nice beats btw, keep up the good work!!
I'm bad in english but i really understand everything you say. Thanks for lessons!
Thank you for the nice words 🙏🙂 Very glad to hear that! Maybe that's because we both speak JavaScript 😁😉
@@CodingJourney it is very well said😎🙂
Very cool 😎
Thaaanks 🙂 Glad you liked it!
Wow thank you
🙏 My pleasure!!
You're stunning, bro!
Heh! Thanks for the lovely comment man 🙂
Thansk ! works perfectly on IOS and other devices .
Amazing! Thanks for sharing your experience 💙🙂
Coding Journey This is what I’m looking for! Since ‘scroll-behavior’ does not work on iOS devices. I’m finding for the cross platform smooth scroll. Thank you ! :)
Very glad it helped!! But in any case, let's hope that Safari will soon support the scroll-behavior property! It would be good to have that option as well, in case we want to keep things as simple as possible 😉🙂
ακραια ελληνικη προφορα
😂 Ένοχος 😉💙
how to implement menu items to be active when changing ?
what if scroll start lagging after i use it several times, used 3 approach
It is possible for Approach #1 to be compatible across browsers by turning its ES6 syntax into ES5 through Babel?
for me this code also works, but problem is when i put some show and hide function(jquery) then scroll but from bottom of page and should be from bottom of targetId
thanks bro :D
My pleasure 😉🙂
nice
Thanks! Glad you liked it!
You, Sir, have earned yourself a subscriber!
I don't know why but it was only yesterday that your tutorial on this very subject showed up in my search results. I have been searching for a _long_ time for a pure vanilla javascript solution that included *both* smooth scroll *and* closing the nav menu after a link item is clicked!
If I wanted to have my site scroll horizontally, is it just a matter of changing the _y-axis_ methods to the _x-axis_ ?
*THANK YOU!*
Hey what's up man! Thanks for the lovely comment, welcome aboard 🙂
Horizontal smooth scrolling...interesting!! I wasn't thinking about that when I created this video to be honest 🙂 But turns out that it is quite simple to also make this work for horizontal smooth scrolling as well! All you have to do is take into account both coordinates (X,Y) instead of just Y...so I would do the following modifications in smoothScroll function:
const targetPositionY = document.querySelector(targetId).offsetTop;
const targetPositionX = document.querySelector(targetId).offsetLeft;
const startPositionY = window.pageYOffset;
const startPositionX = window.pageXOffset;
const distanceY = targetPositionY - startPositionY;
const distanceX = targetPositionX - startPositionX;
And I would also specify the x-coordinate in window.scrollTo(xpos, ypos) method, instead of setting it to zero. For example:
window.scrollTo(easeInOutCubic(progress, startPositionX, distanceX, duration), easeInOutCubic(progress, startPositionY, distanceY, duration));
And that should do the job 🙂 Thanks for pointing this out!! Keep coding 😉🙂
@@CodingJourney Awesome, Sir. Thanks again!
Can anyone explain me ease functions??
Thanks for taking the time to make this tutorials. I´m having this issue on Visual Studio Code, don´t know why it is happening
scrolljs.js:12 Uncaught TypeError: navbarLinks.forEach is not a function
at scrolljs.js:12
(anonymous) @ scrolljs.js:12
Hey! You can use the forEach method over an array (or array-like object such as NodeList, which is the case for navbarLinks). The error you are getting probably implies that navbarLinks in not available (or at least it is not a NodeList which should be the case since it is the result of document.querySelectorAll() method). Unfortunately, it is impossible to debug without looking at your code and the structure of your project (for example from what I can see you are also using a separate scrolljs.js file...does it have access to navbarLinks?...). You can also find a link to the code for this project in the description. Hope it helps! Good luck, all the best!!
Hey thank you so much. What a fantastic video. So well explained. I really appreciated the effort you went into. One area I am trying to get this to work in is with additional html pages. So say from your homepage you actively leave to go to another page (like a privacy/cookie policy page). How can you use the navbar menu and smoothscroll to get back to the homepage and the various anchor links. Currently all smooth scroll options I see work, but don't allow you to return to the homepage because it adds the # tag to the end of the current page's url - which is obviously not the homepage. Any ideas? Thanks once again.
Hey David, thanks for the nice words! When I designed this project, I was thinking of Single Page Applications/Webpages. What you are describing is a bit hybrid... Now, a quick fix to make it work with changing as little as possible would be:
1. Leave index.html links the way they are.
2. In the new page, say terms.html, change the links' format this way: For navbar-brand: href="./index.html" (or choose the correct path if terms.html is not in the same folder as index.html), for link to HTML section: href="./index.html#html" etc.
3. In JavaScript file in navbarLinkClick function change the smoothScroll(event); to:
const currentUrlFilename = window.location.href.split("/").pop();
if(currentUrlFilename.includes("index.html") || currentUrlFilename==="") {
smoothScroll(event); // Call the "smoothScroll" function
}
That should work, good luck!!
Oh wow thanks for the response. I’ll have a look at this over the weekend and see if I can successfully implement it. Thank you so much.
@@squirrelwise Sure no problem! And btw if u also wanted to get rid of hash in url once u r back to index.html u can add this (exactly before smoothScroll(event);):
if(location.hash) {
history.pushState("", document.title, window.location.pathname);
}
All the best!!
Coding Journey ok brilliant. I’ll have a play and report back.
@@CodingJourney Hey - so I was trying to implement this today and naturally I was unsuccessful. From what understand I should create a second navbar for all the additonal html pages - since I have to phyiscally change the url links. Is this correct? I have managed to get the smooth scroll working nicely in my setup which is great (just not getting back home). Is there any way you could potentially update your codepen? That would help massively in being able to implement and understand this. Of course if you can't be bothered I understand, it is your free time after all. Anyway I appreciate the help. Thank you very much.
good, but does that work when u have a link to another page
Hey mate! When I designed this project, I was thinking of Single Page Applications/Webpages. Some other person asked me about this, you can find the discussion if you go through the comments, in which I'm providing a quick and dirty solution, but to be honest I would probably restructure a few things if I planned for a multi-page project from the beginning! All the best, keep coding!!
@Coding Journey can you help?
In my navbar I also have a div id="contact" with a mailto link.
My error is this.
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'mailto:Grieswurst@web.de' is not a valid selector.
at smoothScroll (file:///D:/Bewerbungswebseite/main.js:56:35)
at HTMLAnchorElement.navbarLinkClick (file:///D:/Bewerbungswebseite/main.js:22:3)
Line 56 in JS is:
const targetPosition = document.querySelector(targetId).offsetTop;
P.S: Sorry for deleting the other post, didn't see u replied already!
So I suppose you don't want that link to smooth scroll to anywhere but simply perform the mailto action. In this case you can be a bit more specific in selecting the links which are supposed to smooth scroll
e.g. const navbarLinks = document.querySelectorAll(".navbar ul a"); // given that "mailto" link does not belong to the "ul"
or add a specific class for the smooth scrolling links and use that class as a selector.
Hope I understood the problem correctly and this helps 🙂
@@CodingJourney Yes, thanks thanks thanks a lot! The first solution helped!