Installing Smooth Back To Top Blogs - Maybe it's a lot of splatter on the internet about the tutorial how to install the key back to the top in the blog and this time I will share tips about the tutorial .
The role and function of the button back to top itself is quite important that makes it easy for visitors who want to go back to the top of the page mengscroll by just clicking one button .
Here's how to install?:
1. Login to Blogger Dashboard > select blog > select Templates > then click the Edit HTML , paste the following code after the <head> or before </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>If your template is mounted Fontawesome above , ignore the first step up to the next step .
2. Save the CSS below before ]]></b:skin>
.smoothscroll-top {3. Paste the jQuery and HTML below before </body>
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;
}
<div class="smoothscroll-top">4. After that save the template and see the results .
<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');
}
//]]>
</script>
No comments:
Post a Comment