scroll back to top widget add blog per

Kabhi kabhi hum bohot hi bada article likh dete hai, to jab hamare blog par koi article pad raha hota hai to use upar ya niche jaane me dikkat aa sakti hai, kyoki article itna bada ho jata hai aur waapas upar jaane ke liye bohot jada scroll karna padta hai. Iske liye “Back to Top” button ka use hota hai.
Back to Top button par click karte hi aapka reader blog ke Top yani Upar pohoch jayega. Is post me mai aapko batauga ki “Back to Top” button kaise lagate hai. Aur ye button koi aam button nahi ek Smart button hoga, joki apke scroll ko dekh kar apne aap apna design badal sakta hai.
Back to Top button Kaise Lagaye?
Aap pehle Layout me jaakar
“Add Gadget” select kare

Phir HTML/Javascript ka gadget add kare

Ab jo box khulega usme Title ko khali chod de. Neeche Content box me code paste kare .

Aage Padhe :

Ab jo box khulega usme Title ko khali chod de. Neeche Content box me code paste kare

<style>/********************BACK TO TOP BUTTON********************/
.tcb-top {
position: fixed; bottom: 25px; right: 0;color:#fff; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); background: #222; -webkit-transition: all 0.3s ease, -webkit-transform 0.5s 0.3s ease; -moz-transition: all 0.3s ease, -moz-transform 0.5s0.3s ease; transition: all 0.3s ease, transform 0.5s 0.3s ease; text-transform: uppercase; padding: 10px 10px 10px 0; opacity: 0; visibility: hidden; font-weight: bold; } .tcb-top-visible {
opacity: 0.5; visibility: visible; } .tcb-top-fadeIn, .tcb-top:hover {
opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tcb-top:before {
content: ''; position: absolute; height: 100%; width: 50px; right: 100%; top: 0; background: #222 url(http://imgh.us/tcb-direction.svg) no-repeat center 50%; background-size: 20px; }</style><a href="#top" class="tcb-top">Top</a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>
jQuery(document).ready(function($){
// duration of animation while going back to top var back_duration = 600, // scroll position after which 'back to top' button will be visible back_offset = 800, // store 'back to top' element in variable for easy access back_button = $('.tcb-top'); // animate back to top back_button.on('click', function(e){
e.preventDefault(); // running jQuery animate function of $('body,html').animate({
scrollTop: 0 , }, back_duration ); }) // making button directionaware var lastScrollTop = 0, delta= 5; $(window).on('scroll', function(){
var scrollTop =$(this).scrollTop(); if( Math.abs(scrollTop - lastScrollTop) <= delta) return false; // show button after offsetvalue ( scrollTop > back_offset )? back_button.addClass('tcb-top-visible') : back_button.removeClass('tcb-top-visible'); // check if scrolling down if(scrollTop > lastScrollTop){
back_button.removeClass('tcb-top-fadeIn'); } else {
// scrolling up? if yes make it fadeIn (back_button.hasClass('tcb-top-visible')) ? back_button.addClass('tcb-top-fadeIn') : back_button.removeClass('tcb-top-fadeIn'); } lastScrollTop = scrollTop; });});</script>