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;
}
[/cc]
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(‘‘);
$(“.to-bottom-btn”).click(function() {
$(“html, body”).animate({ scrollTop: $(document).height() }, 1600);
return false;
});
});
[/cc]