I have a page in which I have a fixed positioned button, which when clicked should calculate the height of the viewport, and then scroll down the page by that height. ie. to the next viewport. When the user reaches the point when there is no more room to scroll I want to hide this button. Not sure how to do this, so far I have this:
$(document).on('click', '.next-viewport-down', function(event) {
event.preventDefault();
var viewportHeight = $(window).height();
$('html, body').stop(true,true).animate({ ... }, 2000);
});
You can use the window. innerHeight property to get the viewport height, and the window. innerWidth to get its width. let viewportHeight = window.
One need to use scrollHeight property to get height of the scroll view of an element. If you are using jQuery 1.7 or higher version then use prop(), otherwise use attr(). In the code sample, I have used "prop()" to get value of "scrollHeight" property.
scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .
Try this.
$(document).on('click', '.next-viewport-down', function(event){
event.preventDefault();
var viewportHeight = $(window).height();
$('html, body').animate({
scrollTop: viewportHeight,
complete: function () {
//Hide your button here
}
}, 2000);
});
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