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.
<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.5s 0.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 direction aware
var lastScrollTop = 0, delta = 5;
$(window).on('scroll', function(){
var scrollTop = $(this).scrollTop();
if( Math.abs(scrollTop - lastScrollTop) <= delta) return false;
// show button after offset value
( 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>
Code ki chinta mat kare bas copy karke add karde, aur save par click karde.
Congratulation aapne apne blog me ek bohot hi bhadia back to top button laga diya hai, ye button page ke right me neeche hota hai. Ye button direction ko dekh kar chalta hai.
Maine is post ko bhoto hi aasaan rakhne ki koshish ki hai, agar aapka koi sawaal hai to neeche diye gae comment box me jaroor likhe.