Archive for April 2010

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 (!"loading")) {
  "loading", true);
            $.getJSON("/news/list?page=" + (++page), function(data) {
                // remove the loading text
                $("#news_list li:last").remove();
                for (var i = 0; i <; i++) {
                    $("#news_list").append("<li>" +[i].headline + "</li>");
                // now that the ajax call is done, we can re-enable this
      "loading", false);

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