jQuery Detect Scroll to Bottom – Read T&C
jQuery code snippet to detect if a user has scrolled to the bottom of the page (or div with scroll) before enabling the terms and conditions checkbox.
Terms of service jargon stuff here
I accept the blah, blah, blah.
jQuery(document).ready(function() {
jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);
var $box = $("#scrollPane"),
$inner = $("> .inner", $box),
innerOuterHeight = $inner.outerHeight();
boxHeight = $box.height();
boxOffsetTop = $box.offset().top;
jQuery("#scrollPane").scroll(function() {
if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight ) {
jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
}
});
});Frequently Asked Questions (FAQs) about jQuery Scroll to Bottom
How can I use jQuery to detect when a user has scrolled to the bottom of a page?
To detect when a user has scrolled to the bottom of a page using jQuery, you can use the scroll event in combination with the scrollTop and scrollHeight properties. The scroll event is triggered whenever a scroll occurs, and the scrollTop property returns the number of pixels that the content of an element is scrolled vertically. The scrollHeight property, on the other hand, returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin. Here’s a simple example:$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}});
In this code, $(window).scrollTop() returns the number of pixels that the user has scrolled from the top, $(window).height() returns the height of the viewport, and $(document).height() returns the height of the document. When the sum of the scrolled pixels and the height of the viewport equals the height of the document, it means the user has scrolled to the bottom.
How can I use jQuery to automatically scroll to the bottom of a page?
To automatically scroll to the bottom of a page using jQuery, you can use the animate method in combination with the scrollTop and height properties. The animate method performs a custom animation of a set of CSS properties, the scrollTop property returns the number of pixels that the content of an element is scrolled vertically, and the height property returns the height of an element in pixels. Here’s a simple example:$("html, body").animate({ scrollTop: $(document).height() }, "slow");
In this code, $("html, body").animate({ scrollTop: $(document).height() }, "slow"); scrolls the document in a slow animation to the bottom. The scrollTop property is set to the height of the document, which means the page will be scrolled to the bottom.
How can I use jQuery to detect when a user has scrolled to the bottom of a specific element?
To detect when a user has scrolled to the bottom of a specific element using jQuery, you can use the scroll event in combination with the scrollTop, scrollHeight and outerHeight properties. The scroll event is triggered whenever a scroll occurs, the scrollTop property returns the number of pixels that the content of an element is scrolled vertically, the scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin, and the outerHeight property returns the height of an element in pixels, including padding, border and optionally margin. Here’s a simple example:$("#element").scroll(function() {
if($(this).scrollTop() + $(this).outerHeight() == this.scrollHeight) {
alert("bottom!");
}});
In this code, $(this).scrollTop() returns the number of pixels that the user has scrolled from the top of the element, $(this).outerHeight() returns the height of the element, and this.scrollHeight returns the height of the content of the element. When the sum of the scrolled pixels and the height of the element equals the height of the content, it means the user has scrolled to the bottom of the element.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
