Skip to main content
FANCYBLOGGERTRICKS

follow us

How Install a Sticky Back to Top Button With Smooth Scrolling




Adding Back to Top Button on blogger - Easy navigation is one of the most important thing every blog must possess. Installing a smooth scrolling back to top button is one of the ways that improves easy navigation on a blog. Such that, a visitor will be able to jump back to top when he finishes reading by just clicking on a arrow button.


Today, I will be writing about how to install this button on a blogger blog.
Note: if there is an existing back to top button remove it first.

How to install back to Top Button .


1. Login to your blogger dashboard>>Select the blog you want to add the button to >>Select Template>>Then click on edit Html.

Now locate <head> and paste the below html code after it.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Save the below css before ]]></b:skin> or </style>


.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}

3. Now Save the below JQuery and HTML before </head>

<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

$(document).on( 'scroll', function(){

if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});

$('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>
4. Now everything is done, save your template and see the wonderful result.



Is this post helpful? Or did you need any help?  Give us feedback through the comment box. 

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment