Enlarge Your Document

When you have a single web page in which you dynamically display and hide different parts, usually the document enlarges ans shrinks accordly. The problem is when you hide somethings and the document lower point happens to be above the bottom of the viewport, causing a shift of the document itself to match his current height with the current window. In this case, the user faces an unpredicible and instantaneous scroll of the page, and probably needs a moment to figure out where the elements he was interacting has been moved.

To solve this usability issue I've managed to put an "anchor" always moving to the bottom of the page, forcing the document to always enlarge but never shrink. In this way, even when a part is hidden the viewport is always filled to the bottom, and no confusing vertical scroll happens.

Mandatory sample code.

At the bottom of the HTML document, I've put

<div id="bottom-stop"></div>  

In the CSS file

#bottom-stop {
    position: absolute;
    clear: both;
    height: 1px;
    width: 100%;
}

In Javascript

$('#bottom-stop').offset({left: 0, top: $(document).height() - 1});
$(document).scroll(function() {
    var h = $(document).height();
    var b = $('#bottom-stop').offset();
    if (h < b.top)
        $(document).height(b.top);
    else
        $('#bottom-stop').offset({left: 0, top: $(document).height() - 1});
});