Birdhouse Websites and Designs

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


  • CSS
  • jQuery


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.


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

[cc lang=”css”]

/* 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;



Add this code to your custom jQuery file.

[cc lang=”javascript”]


$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 500) {
} else {

// Add The Button
$(“.qodef-mobile-header”).after(‘to the bottom‘);

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



Share This