How to Make Back to Top on a Blog - Blogxhtml
News Update
Loading...

Wednesday, 9 September 2020

How to Make Back to Top on a Blog


Previously, what is back to top?
back to top is a widget on a blog, which will return you to the top or to the beginning, for
example, when you read an article to the bottom, and want to go back to the top or where you started reading, this is where back to top is made to make it easier to return above, and we have to scroll the mouse, or it can be interpreted, scroll up with just 1 click

Ok, we just go to the point: D
1. Make sure you have installed fontawesome, if you haven't installed fontawesome first,
usually the template uses html5 and more responsive is usually already installed

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>


2. Then Login to your blogger> Template> Edit HTML
then enter the CSS script below before </style>

/* Back to top abdurrahim-id.blogspot.com */
.back-to-top{visibility:hidden;background-color:rgba(55,71,96,.8);color:#fff;width:38px;height:38px;text-align:center;line-height:38px;position:fixed;bottom:10px;right:10px;z-index:90;cursor:pointer;opacity:0;border-radius:50%;-webkit-transform:translateZ(0);display: inline-block;transition:all .4s}
.back-to-top .fa{font-size:22px;vertical-align:middle}
.back-to-top:hover{background-color:#009ccf;color:#fff;opacity:1;}
.back-to-top.show{visibility:visible;opacity:1;}
.back-to-top{width:32px;height:32px;line-height:32px;bottom:10px;right:10px}
.back-to-top .fa{font-size:14px}

3. Also enter the Javascript below before the </body> code

// Back to top button
(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>600?$("#back-to-top").addClass("show"):$("#back-to-top").removeClass("show")}),$("#back-to-top").click(function(){return $("html,body").animate({scrollTop:"0"})})})}).call(this);

4. and enter the following code.

<div class='back-to-top' id='back-to-top' title='Back to top'><i class='fa fa-angle-double-up'/></div>

5. Don't forget to blog you must also have JQuery

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

and see the demo below.

That's how to add Back to top,
back to top is exactly like on this blog, so you can see it under the right corner, don't forget to scroll down first, so that the back to top button appears,

if there is still confusion, you can ask in the comments column.

Share with your friends

Add your opinion
Disqus comments
Notification
BLOGXHTML.BLOGSPOT.COM is a blog where you can learn HTML, CSS, and JavaScript, SEO along with creative CSS Animations.
Done