Smooth Scroll to DIV on Different Page using JavaScript & CSS | Smooth Scroll to Section Tutorial

Learn how to redirect to a div on a different page with smooth scrolling by using CSS and JavaScript. We are solving a small problem today by using JavaScript and CSS. We have to go to another page at a specific div on click of a link. This is easy because we can just use hash id name in URL. But we want to scroll to that div on another page, rather then just landing there. Every now and then I have to implement smooth scrolling from one page to a specific section in another page in my frontend projects. I have already created a tutorial on redirect to a div on a different page with smooth scrolling by using only CSS. Scroll to particular div position when click on link from another page can be done by using CSS and JavaScript.

Here is smooth scroll to div javascript code example. I have index page, about page, CSS file and a JavaScript file. For 'HOME' I have a link that points to a div on about page. On about page, we have that div with unique ID and a link to go back to homepage. If we click at the link from homepage, we land on about page at that specific div that we are supposed to go to but abruptly and in a sudden move. We want to land at about page and then page should scroll to the target div.

jQuery Smooth Scroll To ID From another page is simple. In JavaScript we will implement logic like this: We will check the hash value in URL. If it's present, we will animate page to that DIV. We can also use offset from target DIV.

Now this script checks if there is hash in URL, and then it will scroll to that div.
This is JavaScript implementation and it works. We can use animate to another div on same page by using similar technique if we need to. But there is an easy method to scroll to div by using CSS only. I have shown you that in video. By using only one liner CSS code, all movements on page will be smooth scroll.

This css one liner is doing same thing that we did by using JavaScript - that is - smooth scroll. So this is how we navigate to another page with a smooth scroll in CSS or JS easily.

- Smooth Scroll Page to ID in WordPress | No Coding Required
https://youtu.be/MuLKKIewiAA
- Pure CSS Smooth Scrolling | Smooth Scrolling CSS | Smooth Scroll to Section with Only CSS
https://youtu.be/bjGioNsvEy8
- Scroll Div / Textarea To Bottom On Page Load using jQuery | jQuery Tutorial
https://youtu.be/D6VvuuU5CbM
- Easy Smooth Scroll To Top | Scroll Speed & Transition Type Control
https://youtu.be/RwAdexMY0Kg
- Responsive Full Screen Section by Section Smooth Scroll | Full Screen Website
https://youtu.be/0MnEgzTbDwY

More CSS Tutorials:
https://youtube.com/playlist?list=PL1w28LzkbaQEADM7Q-tzY6dBo4tQ10lcq

Thank You!
? LIKE VIDEO
? SUBSCRIBE
? PRESS BELL ICON
✍️ COMMENT

Channel: https://www.youtube.com/webstylepress
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress
Twitter: https://twitter.com/webstylepress
GitHub: https://github.com/webstylepress
#css #javascript #smoothscroll #css3 #webstylepress #webdevelopment #js #csstutorial