Back to top विजेट Smooth Scroll Effect के साथ

73

स्मूद स्क्राल बैक टू टॉप (Smooth scroll back to top), बैक टू टॉप (Back to top) का एक अन्य उपल्ब्ध सुविधाजनक और बेहतर विकल्प है लम्बे पेजों पर नीचे से ऊपर जाने का। स्मूद स्क्रालिंग (Smooth Scrolling) एक प्रभाव है जिससे आप धीरे-धीरे करके स्मूदली (Smoothly) वेबपेज के निचले भाग से ऊपरी भाग की ओर बढ़ते हैं। यह प्रभाव देखने में बहुत अच्छा लगता है। इसे बनाने में जे-क्वेरी (jQuery) का इस्तेमाल किया गया है। यदि आप पहले से ही अपने ब्लॉग पर जे-क्वेरी (jQuery) प्रयोग करते हैं तो इसमें जे-क्वेरी वाली पहली लाइन को निकाल दें। जे-क्वेरी को एक से अधिक बार टेम्पलेट में प्रयोग करना ठीक नहीं माना जाता है, इससे ब्लॉग की परफार्मेंश (Performance) पर प्रभाव पड़ता है।

स्मूद स्क्राल बैक टू टॉप कोड (Smooth scroll back to the top Code):

आप अपनी पसंद के अनुसार बैक टू टॉप ऐरो (Back to top arrow) का चुनाव करें।

Regular Green BACK TO TOP Widget Code:

<script src='//code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'></script> 
<script src='//techprevue.googlecode.com/files/back_to_top.js'  type='text/javascript'></script> 

Blue BACK TO TOP Widget Code:

<script src='//code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'></script> 
<script src='//techprevue.googlecode.com/files/back_to_top_blue.js'  type='text/javascript'></script> 

Green Button BACK TO TOP Widget Code:

<script src='//code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'></script> 
<script src='//techprevue.googlecode.com/files/back_to_top_greenb.js'  type='text/javascript'></script> 

White Button BACK TO TOP Widget Code:

<script src='//code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'></script> 
<script src='//techprevue.googlecode.com/files/back_to_top_white.js'  type='text/javascript'></script> 

इसे ब्लॉगर से जोड़ना बहुत सरल है। इसके लिए आपको अपने डैशबोर्ड (Dashboard) से लेआउट (Layout) पर जाकर एक HTML/JavaScript गैजेट (Gadget) जोड़ना होगा। इस जोड़े जाने वाले गैजेट में ऊपर दिया गया स्मूद स्क्राल बैक टू टॉप कोड (Smooth scroll back to the top Code) पेस्ट करके उसे सहेजना होगा। आप इसे पहले से ही जुड़े किसी भी HTML/JavaScript गैजेट में डाल सकते हैं।

आप इस पृष्ठ के दायीं ओर नीचे की तरफ़ सफ़ेद बटन के तौर पर इस स्क्रिप्ट का उदाहरण देख सकते हैं

आशा है कि आप अपने ब्लॉग पर स्मूद स्क्राल वाला बैक टू टॉप कोड (Smooth scroll back to the top Code) प्रयोग करके आनंदित होंगे। यदि आपको हमारे ब्लॉग की पोस्टें पसंद आ रही हैं तो हमें फेसबुक, गूगल और ट्विटर पर फालो (Follow) करें।

.post-body img {
background: transparent;
padding: 0px;
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}