Scroll to bottom of Div on page load (jQuery)

Smooth-scrolling style with animation

$(document).ready(function() {
    var div = $('.div-class');
    div.animate({ scrollTop: div.prop("scrollHeight")}, 1000); // 1000ms for a faily nice "div-dive"
});


Modify 1000 to adjust the speed of the animation. A smaller value will result in a faster scroll, while a larger value will give a more leisurely, smooth scroll. Like sliding down a rainbow, but with less color and more text!

Scrolling asynchrously loaded or dynamic content

Content that is dynamically loaded or modified post-render requires special consideration. The below snippet will ensure the div's scroll position always updates correctly:

function scrollIt(div) {
    div.scrollTop(div.prop("scrollHeight"));
}

$(window).on('load', function() {
    var div = $('.div-class');
    scrollIt(div);
    
    // Rescroll when content changes
    div.on('contentChange', function() {
        scrollIt(div);
    });
});


This could be quite the gem if you're working on a chat-like application, where the view should automatically adjust to show the latest messages.

Necessary CSS for proper scrolling

Here's an essential CSS setup for your div to ensure proper scrolling behavior:

.div-class {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 500px; // But that's just my opinion, feel free to disagree! 😉
}


It's important to allow the div to overflow along the y-axis, potentially hide overflow on the x-axis, and have a max-height to restrain its overall height.

Performance-wise, JavaScript emerges victorious

This JavaScript equivalent accomplishes the same result but does so more efficiently, particularly if minimizing dependencies is a priority:

window.onload = function() {
    var div = document.getElementById('divId');
    div.scrollTop = div.scrollHeight;
    // Because sometimes, Vanilla tastes better 🍦.
};


Using window.onload ensures all page assets are loaded up before the scrolling magic kicks in.

Actions after scrolling: Callbacks

$(document).ready(function() {
    var div = $('.div-class');   
    div.animate({scrollTop: div.prop('scrollHeight')}, 1000, function() {
        // Callback, makes a grand entrance when scrolling ends 🕺
        console.log('Hey there! Finished scrolling just in time for tea.');
    });   
});


In the specimen above, we've logged a console message, but this callback can be tailored for whatever function your heart desires.

Diving into scrollHeight and clientHeight differences

$(document).ready(function() {
    var div = $('.div-class');  
    var endPosition = div[0].scrollHeight - div[0].clientHeight;
    div.scrollTop(endPosition);
    // The smart way to DIVe! 🌊
});


This little trick gives a more accurate scrolling position, even when content sizes fluctuate. It essentially calculates the exact scroll manoeuvre necessary to touch the bottom of the div.

Scroll mastery for a better UX (User Experience)

Auto-scrolling can make users' life in a web application easier. Implementing it in a chat system, for instance, means users always see the latest messages without the need for manual intervention. It's like having a personal butler, only for scrolling.