What's the equivalent of the following in plain JS?
$(window).scroll(function() { });
I'm also looking to animate scroll, e.g.:
$('html, body').animate({scrollTop:1750}, 'slow');
Should I be using requestAnimationFrame
?
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
Are there any examples that trigger an animation once on click and not continuous renders?
We can set what the "top" is, by providing a Y coordinate, and can call the method on each "click" event on the button: scrollBtn. addEventListener("click", () => { window. scrollTo({ top: 0, behavior: "smooth" }); });
$(selector).scrollTop(position) Parameter. Description. position. Specifies the vertical scrollbar position in pixels.
Method 1: Using window.scrollTo() The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.
window.onscroll = function() {
console.log('scrolling');
};
or if your targeted browsers support addEventListener
:
window.addEventListener('scroll', function() {
console.log('scrolling');
});
In my opinion, if you're just scrolling from one section to a another section of your page, and not having some sort of constantly running scrolling movement, you're fine doing this without using requestAnimationFrame.
You can find good implementations of scrolling to a particular part of the window in pure javascript, I suggest checking out their source(or even using them).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With