617.909.6454

< Back to Blog


top-arrowEver wondered how to add a “back-to-top” button to your website? It’s pretty simple.  Follow these steps:

1.  Create a JavaScript file with the following jQuery code (if using WordPress, make sure to enqueue the file in your functions.php file):

// JavaScript Document

jQuery(document).ready(function(){
// Scroll (in pixels) after which the “To Top” link is shown
var offset = 300,
//Scroll (in pixels) after which the “back to top” link opacity is reduced
offset_opacity = 1200,
//Duration of the top scrolling animation (in ms)
scroll_top_duration = 700,

//Visible or not “To Top” link
jQuery(window).scroll(function(){
( jQuery(this).scrollTop() > offset ) ? jQuery(‘.to-top’).addClass(‘top-is-visible’) : jQuery(‘.to-top’).removeClass(‘top-is-visible top-fade-out’);
if( jQuery(this).scrollTop() > offset_opacity ) {
jQuery(‘.to-top’).addClass(‘top-fade-out’);
}
});

//Smoothy scroll to top
jQuery(‘.to-top’).on(‘click’, function(event){
event.preventDefault();
jQuery(‘body,html’).animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});

});

2.  Add the following CSS to your style.css file:

/*BACK-TO-TOP BUTTON STYLES*/
.to-top {
display:inline-block;
height:40px;
width:36px;
position:fixed;
bottom:175px;
right:0px;
box-shadow:0 0 10px rgba(100,100,100,0.05);
overflow:hidden;
text-indent:100%;
white-space:nowrap;
background:rgba(0, 148, 207, 0.5) url(images/to-top-arrow.svg) no-repeat center 50%;
visibility:hidden;
opacity:0;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s;
z-index: 100000;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.to-top.top-is-visible {
visibility:visible;
opacity:1;
}

.to-top.top-fade-out {
opacity: 1.0;
}

.no-touch .to-top:hover {
background-color:#0094CF;
opacity:1;
}

3.  Create an “Images” folder in your theme’s root directory (e.g., “theme-name/images”) and save the following SVG file of the to-top arrow (save file in images directory with file name: to-top-arrow.svg) :

Right click on blue square to the right to download SVG image (or click on square to open image in a new tab):   to-top

4.  Add a anchor tag with href=”#0″ and class=”to-top” to the top of the body of your HTML page (right after the opening body tag and before you’re header tag):

Top

If using WordPress, add the anchor tag to your header.php file.