Menu
I want to animate a scroll to the bottom of the viewport with jQuery. Is there a plugin available which isn't overkill (i.e. without a huge feature set for this small task);
Is there a plugin available or a way to do this natively with jQuery?
568
scroll(function() { if($(window). scrollTop() + window. innerHeight == $(document). height()) { alert("bottom!"); } });
In jQuery, the scrollTo() method is used to set or return the vertical scrollbar position for a selected element. This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top.
To detect when a user scrolls to bottom of div with React, we can check if the sum of the scrollTop and clientHeight properties of a scrollable element is equal to the scrollHeight property of the same element. We call the useRef hook to create a ref and we assign the returned ref to the inner div, which is scrollable.
To detect scroll end with JavaScript, we can listen to the scroll event. Then in the event listener, we check if offsetHeight + scrollTop is bigger than or equal to scrollHeight . We get the div with document. querySelector .
jQuery makes things like this so trivial that you just dont need a plugin. Example:
var x = 250; //insert your own formula to calculate where you want to scroll to in px
var t = 500; //arbitrary time in ms
$("html,body").animate({ scrollTop: x }, t);
Instead of html,body you can put any element which scrolls, like a div. t is the time in ms over which the animation will run and x is your position to scroll to in px. Note that this works with scrollLeft also but not scrollRight or scrollBottom (not a limitation of jQuery but JavaScript).
173
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
