Top Ad unit 728 × 90

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..!!


Liked my article?Please Join my Blog Here to rest updated alongside lots more. 


Having whatever query,feel costless to enquire me..!!
Smooth Scrolling Dorsum To Pinnacle Push For Bloggers Reviewed by Dul on May 19, 2018 Rating: 5

No comments:

All Rights Reserved by Articles Today © 2014 - 2015
Powered By Blogger, Designed by Sweetheme

Contact Form

Name

Email *

Message *

Powered by Blogger.