jQuery Detect Scroll to Bottom - Read T&C

Use jQuery detection to scroll to the bottom and enable the terms and conditions checkbox after the user scrolls to the bottom of the page (or div with scrolling).

The following jQuery code snippet can detect whether the user has scrolled to the bottom of the page:

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");
        }
    });
});

Terms of Service Contents are here

I accept the above terms.

FAQs about jQuery scrolling to the bottom (FAQs)

How to use jQuery to detect when a user scrolls to the bottom of the page?

Use jQuery to detect when a user scrolls to the bottom of the page, you can use the scroll event and scrollTop and the scrollHeight attributes in combination. The scroll event is fired every time the scroll occurs, and the scrollTop attribute returns the number of pixels in which the element content is scrolled vertically. The scrollHeight attribute returns the total height of the element in pixels, including padding, but not borders, scroll bars, or margins. Here is 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 the user scrolls 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 number of scrolled pixels and viewport height is equal to the height of the document, it means that the user has scrolled to the bottom.

How to use jQuery to automatically scroll to the bottom of the page?

To use jQuery to automatically scroll to the bottom of the page, you can use the animate method and scrollTop attributes in combination. The height method performs a custom animation of a set of CSS attributes. The animate attribute returns the number of pixels that the element content scrolls vertically, and the scrollTop attribute returns the element's height (in pixels). Here is a simple example: height

$("html, body").animate({scrollTop: $(document).height()}, "slow");

In this code,

scrolls the document to the bottom at a slow animation speed. The $("html, body").animate({scrollTop: $(document).height()}, "slow"); property is set to the height of the document, which means the page will scroll to the bottom. scrollTop

How to use jQuery to detect when a user scrolls to the bottom of a specific element?

To use jQuery to detect when a user scrolls to the bottom of a specific element, you can use the

event with scroll, scrollTop and scrollHeight attributes in combination. The outerHeight event is fired every time the scroll occurs. The scroll attribute returns the number of pixels in which the element content is scrolled vertically. The scrollTop attribute returns the total height of the element (in pixels), including fill, but not borders, scroll bars, or margins. The scrollHeight attribute returns the height of the element (in pixels), including fill, borders, and optional margins. Here is a simple example: outerHeight

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");
        }
    });
});

In this code, $(this).scrollTop() returns the number of pixels the user scrolls from the top of the element, $(this).outerHeight() returns the height of the element, and this.scrollHeight returns the height of the element content. When the sum of the number of scrolled pixels and element height is equal to the content height, it means that the user has scrolled to the bottom of the element.

The above is the detailed content of jQuery Detect Scroll to Bottom - Read T&C. For more information, please follow other related articles on the PHP Chinese website!