JavaScript jQuery 👢 Keep the HTML footer at the bottom of the page

Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email
Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email

A JavaScript and jQuery function that keeps the footer (footer) at the bottom of the browser, even when the content of the web page is short.

 

To do so, the code below compares the distance between the footer and the page HTML (in this example, it is the element that carries the ID ""). footer") relative to the height of the web browser window. If the footer is too high, the function applies a higher margin (margin-bottom) to make up for this difference. Finally, we call the function twice. The first time when the page loads. Then we call it a second time on the event $(window).resize() which is triggered every time the browser is resized.

 

jQuery(document).ready(function($) {

    /**
     * Set footer always on the bottom of the page
     */
    function footerAlwayInBottom(footerSelector) {
        var docHeight = $(window).height();
        var footerTop = footerSelector.position().top + footerSelector.height();

        if (footerTop < docHeight) {
            footerSelector.css("margin-top", (docHeight - footerTop) + "px");
        }
    }

    // Apply when page is loading 
    footerAlwayInBottom($("#footer"));

    // Apply when page is resizing
    $(window).resize(function() {
        footerAlwayInBottom($("#footer"));
    });
});

 

Julien .MA Jacob
Developer WordPress
Julien MA Jacob - Developer WordPress
🧙♂️ Passionate about the web and programming with always lots of projects in mind 👨💻 | About page
  Discussion of the article
Subscribe to our newsletter
Notify of
guest
0 Comments
Inline Feedbacks
View all comments