Smooth Scrolling Dorsum To Pinnacle Push For Bloggers
Adding an attractive "Back to Top" Button to your blogs tin larn inward await to a greater extent than professional person as well as provides an tardily navigation option to the readers.This tutorial volition exhibit you lot how to add together novel "Back to Top" push clit alongside "Smooth Scrolling" as well as "Fade Out" effects.Actually its a JQuery script that does all the work.You tin run into the demo at the bottom left side of this weblog post.
How to add together the "Back to Top" Button
1. Go to Blogger>>Design
2. Add a novel HTML/JavaScript
3. Paste the next code to it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(document).ready(function(){ // enshroud #back-top offset $("#back-top").hide(); // fade inward #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll torso to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); render false; }); }); }); </script> <style> #back-top { position: fixed; bottom: 30px; margin-left: -170px; } #back-top a { width: 45px; display: block; text-align: center; font: 8px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #666; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;} #back-top a:hover {color: #000;} /* arrow icon undefinedspan tag) */ #back-top bridge { width: 45px; height: 45px; display: block; margin-bottom: 7px; background: #777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRx3adzUQT3jFlsHAFwEPivJ-50UXZRuG9KfCfT66d4VC8YjrmGsOQOaivR04ZI8LbvMRbCVOap61E6t7BRC9OKd9qXkQvN8ISCEXVhnoOrioArX4uzTAjlDUWvrc7VRUvra1cSAcwnu8/s1600/up-arrow.png) no-repeat centre center; /* rounded corners */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;} #back-top a:hover bridge { background-color: #000;} </style> <div id="back-top" style="display: block; "> <a href="#top"><span></span><font><font>Top</font></font></a> </div>
4. Save the Widget.
5. Drag it to the bottom left side of the footer.
6. And You are done..!!
Having whatever query,feel costless to enquire me..!!
Smooth Scrolling Dorsum To Pinnacle Push For Bloggers
Reviewed by Dul
on
May 19, 2018
Rating:
No comments: