Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!

The Goal:
Add a Scroll to Bottom to your website that acts like scroll to top, but goes in the opposite direction.

Requirements:

  • CSS
  • jQuery

Note:

Note: You’ll want to change .qodef-mobile-header to match an element that exists on your page wherever you want this button to be generated (it’s created in the jQuery). Currently the styles are set to fix the button in place, so it shouldn’t matter what you target, as long as you target a div at the top of your website.

CSS

Add this to the bottom of your CSS stylesheet. If you target a different ID, make sure you change your jQuery code.

/* To the Bottom */
#qodef-back-to-bottom {
    display: inline-block;
    position: fixed;
    left: -38px;
    top: 70%;
    margin: 0;
    z-index: 10000;
    display: none;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform-style: flat;
    -moz-transform-style: flat;
    transform-style: flat;
    font-family: 'space_groteskregular';
    font-size: 1.0rem;
    color: #000;
    letter-spacing: 0.5px;
    line-height: 28px;
}
#qodef-back-to-bottom:before {
    font-family: FontAwesome;
    content: "\f177";
    margin-right: 5px;
}
#qodef-back-to-bottom .qodef-icon-text {
    font-family: 'space_groteskregular';
    font-size: 15px;
    color: #000;
    letter-spacing: 0.5px;
    line-height: 28px;
    font-weight: 600;
}

jQuery

Add this code to your custom jQuery file.

jQuery(function($){
 
// SCROLL TO BOTTOM
    $(document).scroll(function() {
        var y = $(this).scrollTop();
        if (y > 500) {
            $('.to-bottom-btn').fadeIn();
        } else {
            $('.to-bottom-btn').fadeOut();
        }
    });
       
    // Add The Button
    $(".qodef-mobile-header").after('<a class="hide-mobile to-bottom-btn" id="qodef-back-to-bottom" href="#"><span class="qodef-icon-text">to the bottom</span></a>');

    $(".to-bottom-btn").click(function() {
        $("html, body").animate({ scrollTop: $(document).height() }, 1600);
        return false;
    });

});