getButterfly Logo getButterfly

One of my previous clients needed a certain action to be performed when the user scrolled to the bottom of the page, or reached the last element in a list.

These is how I did it. The first example will trigger the visibility of an element when the user reaches the bottom. Obviously, you can add your own events.

$(window).scroll(function() {
    // test if at the bottom
    if($(document).height() - $(window).height() - $(this).scrollTop() == 0) {
        // do something here, like showing a popup element
        $('#popup').show();
    }
});

The second example will trigger the visibility of an element when the user reaches the last li element in a ul list. Again, obviously, you can add your own events.

$(window).scroll(function() {
    // test if last element of the same type is visible
    // such as the last result in a list (ul/li) structure
    if($('#list li:last-of-type').is(":visible")) {
        // do something here, like showing a popup element
        $('#popup').show();
    }
});

That’s it!


Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.



If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a Reply

Your email address will not be published. Required fields are marked *