jQuery plugin: Bottom Event


Adds a “bottom” event that will be triggered when the user has scrolled to the bottom or within proximity to the bottom of an element. This is essentially a the same as my previous scrollLoader plugin, though more generic for other use cases.




proximity (optional – default: 0): How close to the scrollbar is to the bottom of the element before triggering a load. Use proximity: 0 for absolute bottom.
Proximity = (total scroll height – current scroll position) / total scroll height.

Example Usage

// we start with 1 page of data
var page = 1;
$(document).ready(function() {
    $(window).bind("bottom", function() {
        var obj = $(this);
        // since this ajax call might take a while
        if (!obj.data("loading")) {
            obj.data("loading", true);
            $.getJSON("/news/list?page=" + (++page), function(data) {
                // remove the loading text
                $("#news_list li:last").remove();
                for (var i = 0; i < data.news.length; i++) {
                    $("#news_list").append("<li>" + data.news[i].headline + "</li>");
                // now that the ajax call is done, we can re-enable this
                obj.data("loading", false);

Demo - bottom bound to both the window and an element with overflow: auto
Download at GitHub - jquery.bottom-1.0.js

One Comment

muslim culture wall stickers on Tuesday, May 10, 2016 (1:26AM)

Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your weblog? My blog is in the very same niche as yours and my visitors would really benefit from a lot of the information you present here. Please let me know if this alright with you. Cheers!
muslim culture wall stickers http://www.gcmstore2016.com/wall-stickers/muslim-culture-wall-stickers