+ 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!!
12 RĂ©ponses
+ 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
+ 9
https://code.sololearn.com/WmWcnbgi79y3/?ref=app
Tho I'm sure this won't help, but I just like it!
+ 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
+ 5
Just tuning in because I'm also interested if anyone has a simple way.
+ 5
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
+ 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/
+ 2
Just tuning in...
+ 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
- 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!!
- 3
How to directly enter the code syntax