JavaScript Smooth Scrolling | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 11

JavaScript Smooth Scrolling

Hi everyone! I’ve looked nearly everywhere but I can’t seem to find help. Can anyone help me figure out how to create a smooth scrolling effect between anchors on a page in JavaScript? I don’t know what else to do. If you can point me to a book or something? Thank you!!

28th Jul 2018, 10:24 PM
Byron Cross
12 Answers
+ 9
Smooth scrolling using vanilla JavaScript. Make use of element.scrollIntoView({ behavior: "smooth", block: "start" }); to create smooth scrolling but not support in IE and Safari browsers https://code.sololearn.com/WJgsunZxqt6y/?ref=app
29th Jul 2018, 9:16 AM
Calviղ
Calviղ - avatar
+ 9
https://code.sololearn.com/WmWcnbgi79y3/?ref=app Tho I'm sure this won't help, but I just like it!
29th Jul 2018, 5:17 PM
Yash✳️
Yash✳️ - avatar
+ 6
hi Byron Cross , if you want smooth scroll between anchors of page, then you want a simple single function, that takes 2 arguments first - the anchor where you want to scroll to second - speed of scroll this function is very neat for that purpose, see js section for the function https://code.sololearn.com/W5cJ0AufIBDS/?ref=app I hv used it heavily in this code https://code.sololearn.com/W30NFaUm9PKx/?ref=app
29th Jul 2018, 9:19 PM
Morpheus
Morpheus - avatar
+ 5
Just tuning in because I'm also interested if anyone has a simple way.
29th Jul 2018, 3:11 AM
Hatsy Rei
Hatsy Rei - avatar
29th Jul 2018, 1:53 PM
Nomeh Uchenna Gabriel
Nomeh Uchenna Gabriel - avatar
+ 5
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); });
29th Jul 2018, 2:11 PM
Toni Isotalo
Toni Isotalo - avatar
+ 3
Not sure if this is exactly what you need but it may be related to some degree: https://github.com/cferdinandi/smooth-scroll here is the demo https://cferdinandi.github.io/smooth-scroll/
29th Jul 2018, 5:36 AM
seamiki
seamiki - avatar
+ 2
Just tuning in...
29th Jul 2018, 5:25 AM
Filipe
Filipe - avatar
+ 2
<script> $(document).ready(function(){ $("a").on('click', function(event) { if (this.hash !== "") { event.preventDefault(); var hash = this.hash; $('html, body').animate({ scrollTop: $(hash).offset().top }, 1000, function(){ window.location.hash = hash; }); } }); }); </script> use jQuery
29th Jul 2018, 2:38 PM
Prince K
Prince K - avatar
- 2
Hi everyone! I’ve looked nearly everywhere but I can’t seem to find help. Can anyone help me figure out how to create a smooth scrolling effect between anchors on a page in JavaScript? I don’t know what else to do. If you can point me to a book or something? Thank you!!
30th Jul 2018, 7:55 PM
Ariany Rodrigues
Ariany Rodrigues - avatar
- 3
How to directly enter the code syntax
29th Jul 2018, 9:14 AM
William Ribardo