Phum-share

Last Updated:    Sunday, July 31, 2016

How to add GO TO TOP Button On Blogger Work 100%

Smooth GO TO TOP Button is very popular for one webpage . It is very simple to do with just a few lines of code. So here’s a tutorial of how to implement a smooth scrolling  back to top button only using Jquery on your Blogger  blog.





There are 2 step : it's very easy to put it . just follow the step below .



Step 1:
Go to Edit HTML in your blogger and ( CTRL+F ) to Find  <style> and below this tag and add this code CSS :


/*back-to-top*/
 .back-to-top {
display:none;
 position: fixed;
 bottom: 2em;
 right: 0px;
 text-decoration: none;
 color: black;
background-color: none;
 font-size: 12px;
padding: 5px 8px 5px 8px;
margin-right: 20px;
background: #656464 none repeat scroll 0% 0%; color: white;
 }
 .back-to-top:hover {
text-decoration:none;
}
 /*back-to-top*/

Step 2: Find This and just above add this code below :

<!--file For Goto Top open-->
 <div class='top-meun'> <a class='back-to-top'>Back To Top</a>
<script> jQueryundefineddocument).readyundefinedfunctionundefined) { var offset = 220; var duration = 500; jQueryundefinedwindow).scrollundefinedfunctionundefined) { if undefinedjQueryundefinedthis).scrollTopundefined) &gt; offset) { jQueryundefined&#39;.back-to-top&#39;).fadeInundefinedduration); } else { jQueryundefined&#39;.back-to-top&#39;).fadeOutundefinedduration); } }); jQueryundefined&#39;.back-to-top&#39;).clickundefinedfunctionundefinedevent) { event.preventDefaultundefined); jQueryundefined&#39;html, body&#39;).animateundefined{scrollTop: 0}, duration); return false; }) });
</script>
 </div>
 <!--file For Goto Top close-->


Customization: 

1) The Red Line You Can Change To Anything Like You Want ...

Share this

No comments:

If You Have Any Question Please Comment Back ..

HTML Code Encoder