/ / साइट के लिए बटन "ऊपर": कैसे बनाना है

साइट के लिए "ऊपर" बटन: यह कैसे करना है

यह फ़ंक्शन, किसी साइट के लिए "ऊपर" बटन की तरह,इंटरनेट संसाधन को अपने आगंतुकों के लिए अधिक सुविधाजनक बनाता है। यह आसानी से ऊपरी भाग में पेज में कहीं से नेविगेट करने के लिए मदद करता है। यह ऑनलाइन स्टोर और उन साइटों के लिए जरूरी है जिनके पास बड़े लेख हैं जिनके लिए लंबी स्क्रॉल की आवश्यकता होती है।

इसके लिए क्या है

इस समय ज्यादातर साइटों परकार्य, जैसे "ऊपर" बटन, नहीं, और इसके बारे में कुछ भी महत्वपूर्ण नहीं है। लेकिन इसका उपयोग इंटरनेट संसाधन, और इसके आगंतुकों के लिए कई प्लस ला सकता है।

आगंतुकों के लिए लाभ

यह अक्सर होता है जब इंटरनेट संसाधन का पृष्ठसूचना लेख की मात्रा के साथ भारी मात्रा में लोड किया जाता है जब सूचना लेख बहुत अधिक जगह लेता है और आपको माउस व्हील के साथ पृष्ठ को स्क्रॉल करना होता है। इसके अलावा, लेख के अंत में इसके लिए कई टिप्पणियां हो सकती हैं।

जब कोई आगंतुक एक लेख पढ़ता है, कुछ भी नहींपृष्ठ को स्क्रॉल करने में थकाऊ नहीं है, लेकिन जब पाठ समाप्त हो गया है और ऊपर की ओर बढ़ना आवश्यक है, तो यह थोड़ा टायर शुरू होता है। अधिकतर लोग लंबे समय तक स्क्रॉल करने के लिए बहुत आलसी होंगे, और वे अभी भी अपने विस्तार के माध्यम से चलने की बजाए साइट को बंद कर देंगे।

पृष्ठ के शीर्ष पर तुरंत स्थानांतरित करने के लिए बटन का उपयोग करना साइट पर शगल को अधिक सुविधाजनक बनाता है।

एक इंटरनेट संसाधन के लिए लाभ

साइट के लिए बटन ऊपर

संसाधन के लिए सकारात्मक पक्ष स्वयं से आते हैंपिछले कारकों से, क्योंकि साइट पर एक सरल आंदोलन व्यवहार कारकों में सुधार करता है, क्योंकि सभी आगंतुक अपने कार्यों में अधिक सक्रिय होंगे और अन्य पृष्ठों पर चले जाएंगे।

इस प्रकार, ये व्यवहार कारक साइट पर सभी खोज इंजनों के दृष्टिकोण को प्रभावित करते हैं और खोज परिणामों के स्थान में सुधार लाते हैं।

साइट पर स्वयं "बटन" बटन कैसे बनाएं

एचटीएमएल साइट के लिए बटन ऊपर

हम आगे समझते हैं। किसी भी सीएमएस पर किसी साइट के लिए स्क्रॉल अप बटन हमेशा आपके द्वारा किया जा सकता है, केवल कुछ ही सरल कदम:

  • एक छवि बनाना;
  • एक लिपि का निर्माण;
  • एक बटन शैली बनाना;
  • साइट में जोड़ना

बटन छवि

साइट पर "ऊपर" बटन जोड़ने के लिएक्लिक करने पर आपको आइकन को स्वयं बनाना होगा, उपयोगकर्ता पृष्ठ को ऊपर ले जाएगा। ऐसा करने के लिए, आप तैयार किए गए विकल्पों का उपयोग कर सकते हैं, जिनमें से आप हमेशा सबसे उपयुक्त चुन सकते हैं।

बटन की उपस्थिति में सुधार करने के लिए, आपको कुछ सुधार करने की आवश्यकता है, अर्थात्, एक स्प्राइट बनाने के लिए, जो आपको सीएसएस के आधार पर पृष्ठभूमि छवियों को गठबंधन करने की अनुमति देता है, जिससे उनके द्वारा एक एनीमेशन तैयार किया जाता है।

ग्राफ़िक कार्य के लिए, यदि आप किसी भी संपादक का उपयोग कर सकते हैं। लेकिन सबसे सुविधाजनक विकल्प, के बाद से वहाँ डाउनलोड करने के लिए कुछ भी नहीं है और करने के लिए, आप उन्हें सीधे अपने ब्राउज़र में उपयोग कर सकते हैं कोई जरूरत नहीं है ऑनलाइन सेवा Pixlr है।

दिखाई देने वाली संपादक विंडो में काम करना प्रारंभ करने के लिए, "कंप्यूटर से छवि अपलोड करें" फ़ील्ड का चयन करें। उदाहरण के तौर पर, रॉकेट की छवि लें।

साइट पर बटन कैसे बनाएं

यदि चयनित आइकन का आकार बहुत बड़ा है, तोआपको आकार में एक छोटा समायोजन करने की आवश्यकता होगी। ऐसा करने के लिए, शीर्ष मेनू पर जाएं और "संपादित करें" फ़ील्ड का चयन करें, और "नि: शुल्क परिवर्तन ..." के बाद

तस्वीर के बगल में अगला विशेष हैंमार्कर, जो चलते हैं, आप छवि का आकार बदल सकते हैं। अनुपात को सहेजने के लिए, आप इसे दबाकर Shift कुंजी का उपयोग कर सकते हैं, आपको नीले मार्करों को स्थानांतरित करने की आवश्यकता है। इन कार्यों के अंत में, रॉकेट की छवि प्राप्त की जाती है।

अगला कदम परत की एक प्रति बनाना है।

अब आपको रॉकेट तस्वीर को स्थानांतरित करने की आवश्यकता हैएक नई परत थोड़ा सा ऊपर। ऐसा करने के लिए, बाएं मेनू के दूसरे कॉलम में स्थित है, और कीबोर्ड पर तीर "ऊपर" चाल उपकरण का उपयोग करना सुविधाजनक होगा।

अब आपको शीर्ष तस्वीर को काले और सफेद रंग में बनाना होगा। यह शीर्ष मेनू में "सुधार" - "ह्यू / संतृप्ति" आइटम का उपयोग करके किया जा सकता है। पूर्ण विघटन के लिए, संतृप्ति स्लाइडर -100 पर सेट होना चाहिए। यह क्रिया प्रभाव डालती है कि जब आप इसे होवर करते हैं तो "ऊपर" बटन काले और सफेद रंग से बदल जाएगा।

अंतिम स्पर्श अतिरिक्त जगह को हटाने का हैलगभग दो चित्र। ऐसा करने के लिए, बाएं मेनू से "फसल" आइटम का चयन करें और आयत में केवल दो मिसाइलों का चयन करें। फसल निष्पादित करने के लिए, एंटर कुंजी दबाएं।

नतीजा एक ऐसी छवि है जिसमें कोई अतिरिक्त जगह नहीं है। परिणामी छवि की चौड़ाई और ऊंचाई रिकॉर्ड करना आवश्यक होगा, क्योंकि यह डेटा अगले चरण में उपयोगी होगा।

साइट पर बटन कैसे बनाएं

सहेजने के लिए, "फ़ाइल" पर क्लिक करें -"सहेजें", जहां बाएं आइटम "मेरा कंप्यूटर" में हम छवि का नाम लिखते हैं (केवल अंग्रेज़ी लेआउट), प्रारूप का चयन करें (इस मामले में - पीएनजी) और "हां" बटन पर क्लिक करें।

बटन अप स्क्रिप्ट के साथ फ़ाइल करें

इस मामले में, आपको एक स्क्रिप्ट लिखने की आवश्यकता नहीं है। सार्वजनिक विकल्प का लाभ उठाना संभव होगा, जिससे तैयार कोड में कुछ सुधार हो सके।

ऐसा करने के लिए, आपको कोई भी कोड संपादक डाउनलोड करने की आवश्यकता है। सबसे लोकप्रिय और मुफ्त संस्करण नोटपैड ++ है। इसे स्थापित करने के बाद, आपको इस कोड में कॉपी और पेस्ट करने की आवश्यकता है:

<स्क्रिप्ट टाइप = "टेक्स्ट / जावास्क्रिप्ट"> $ (दस्तावेज़)।तैयार (फ़ंक्शन () {$ (विंडो) .scroll (फ़ंक्शन () {if ($ (this) .scrollTop ()> 0) {$ ("# scroller")। fadeIn ();} else {$ ("# स्क्रोलर ")। fadeOut ();}}); $ (" # scroller ")। क्लिक करें (function () {$ (" body, html ")। एनिमेट ({scrollTop: 0}, 400); झूठी वापसी;} );}); </ script>

फिर ऊपरी मेनू "फ़ाइल" पर क्लिक करें - "सहेजेंजैसा ... ", तो हम .js प्रारूप में कोड को सहेजते हैं। उसके बाद, आप इस साइट का उपयोग अपनी साइट पर कर सकते हैं, एक एफ़टीपी कनेक्शन का उपयोग कर स्क्रिप्ट फाइलों और छवियों को अपलोड कर सकते हैं।

साइट पर स्थापना

साइट के लिए स्क्रॉल बटन सेट करने के लिए, आपको वांछित स्थान पर कोड रखना होगा। आपको टैग से पहले इसे दर्ज करना होगा </ body>।

सीएसएस में एक बटन शैली बनाना

अक्सर, साइट के लिए "ऊपर" बटन नीचे ("बेसमेंट") पर स्थित होता है।

साइट style.css फ़ाइल में, आपको निम्न कोड दर्ज करना होगा:

"/ * ऊपर बटन * /

.scrollTop {
पृष्ठभूमि: यूआरएल ("छवियों / up.png") 0 0 दोहराना; / * छवि के लिए एक सरल रास्ता * /
चौड़ाई: 3 9 पीएक्स; / * बटन की चौड़ाई * /
ऊंचाई: 9 6 पीएक्स; / * बटन की ऊंचाई का 50% * /
नीचे: 5px; / * एक निश्चित स्थिति के लिए, नीचे से इंडेंट * /
बाएं: 89%; / * ऑफसेट बाएं * /
}
.scrollTop: होवर {पृष्ठभूमि-स्थिति: 0 -108 पीएक्स; } / * पृष्ठभूमि ऑफसेट * / "

इस मामले में, आपको छवि की डेटा चौड़ाई और ऊंचाई की आवश्यकता है। यह केवल कोड में डेटा दर्ज करने के लिए बनी हुई है, और साइट के लिए "ऊपर" बटन तैयार हो जाएगा! और क्या?

वर्डप्रेस साइट के लिए ऊपर बटन

साइट पर बटन कैसे बनाएं

इस सीएमएस के लिए, "अप" बटन प्लग-इन की मदद से और साथ ही स्वतंत्र रूप से भी बनाया जा सकता है।

प्लगइन के साथ विधि सबसे सुविधाजनक और स्थापित करने में आसान है, क्योंकि इसके लिए केवल इंस्टॉल बटन पर क्लिक करना और प्लगइन मेनू में सभी कार्यक्षमता समायोजित करना आवश्यक है।

उत्तरार्द्ध की पसंद से संपर्क किया जाना चाहिएसावधानी, इसके साथ-साथ साइट पर वायरस आसानी से हासिल करना संभव होगा। सबसे लोकप्रिय और सिद्ध विकल्प एक प्लग-इन है जिसे स्क्रॉल बैक टू टॉप कहा जाता है। आप मानक वर्डप्रेस प्लगइन खोज का उपयोग कर इसे डाउनलोड कर सकते हैं।

इस एक्सटेंशन में एकाधिक हैंकार्यात्मक, और वर्डप्रेस पर साइट के लिए "ऊपर" बटन को वैयक्तिकृत करना बहुत आसान होगा। सभी मानों को बिल्कुल बदला नहीं जाना चाहिए, आपको केवल साइट पेज पर बटन की उपस्थिति और स्थान को कॉन्फ़िगर करने की आवश्यकता है।

जैसा कि आप देख सकते हैं, बटन को साथ सेट अप करेंप्लगइन्स बहुत आसान है। लेकिन एक महत्वपूर्ण बात है, कि प्रत्येक स्थापित प्लगइन सीएमएस लोड करता है। यह इंटरनेट संसाधन की गति को प्रभावित कर सकता है। यही कारण है कि अधिकांश साइट मालिक सीधे कोड में सभी परिवर्तन निष्पादित करने का प्रयास करते हैं, न कि तृतीय-पक्ष एक्सटेंशन की सहायता से। आप एचटीएमएल पर साइट के लिए "अप" बटन बना सकते हैं, जो खपत संसाधनों को कम करेगा।

सभी सिस्टम फ़ाइलों को बदलने से पहले वर्डप्रेस को अपनी बैकअप प्रतियां बनाना चाहिए। इसके बाद, आप ऊपर वर्णित अपना स्वयं का बटन बनाने के लिए सभी चरणों का पालन कर सकते हैं।

जूमला के लिए नोका "अप"

जूमला 3 के लिए बटन अप करें

सीएमएस जूमला वर्डप्रेस की तरह प्लग-इन की स्थापना का भी समर्थन करता है। जूमला 3 पर किसी साइट के लिए "अप" बटन का सबसे सफल संस्करण पृष्ठ का शीर्ष नामक एक एक्सटेंशन है।

इस सीएमएस में, "एक्सटेंशन प्रबंधक" के माध्यम से कोई भी प्लग-इन इंस्टॉल किया जा सकता है। ऐसा करने के लिए आपको इसकी आवश्यकता है:

  • इंटरनेट पर प्लग-इन डाउनलोड करें;
  • एक्सटेंशन प्रबंधक में "ब्राउज़ करें" बटन पर क्लिक करें;
  • डाउनलोड किए गए संग्रह का चयन करें;
  • "डाउनलोड करें" पर क्लिक करें और इंस्टॉल करें।

अब आपको इसे "प्लगइन प्रबंधक" में सक्रिय करने की आवश्यकता है। ऐसा करने के लिए, इस अनुभाग पर जाएं, प्लगइन ढूंढें और अपने राज्य को "चालू" पर स्विच करें।

अगला उसी अनुभाग का उपयोग करके सभी विस्तार पैरामीटर की कॉन्फ़िगरेशन आता है जहां आपको दाईं ओर इस प्लग-इन के "मुख्य पैरामीटर" ढूंढने की आवश्यकता होती है।

पृष्ठ के शीर्ष में निम्न कार्यक्षमता है:

  • / व्यवस्थापक में चलाएं - न केवल इंटरनेट संसाधन पर विकल्प, बल्कि सीएमएस जूमला पैनल में भी विकल्प सक्षम करना।
  • बटन प्रकट स्थिति - "ऊपर" बटन दिखाई देने के लिए उपयोगकर्ता को कितने पिक्सेल बंद करना होगा।
  • ओमिट बटन टेक्स्ट - बटन पर पाठ की उपस्थिति।
  • हमेशा शीर्ष पर - साइट पेज शुरुआत से हर समय प्रदर्शित किया जाएगा। पृष्ठ पर किसी विशिष्ट स्थान पर स्क्रॉल करने के लिए एंकर का उपयोग करते समय, इस विकल्प को सक्रिय करने की आवश्यकता नहीं होती है।
  • चिकना स्क्रॉल - पेज स्क्रॉलिंग चिकनी बनाता है।
  • स्क्रॉल अवधि - वह समय जिसके बाद पृष्ठ पूरी तरह से शुरुआत में स्थानांतरित हो जाता है।
  • स्क्रॉल संक्रमण - महान दृश्य प्रभावों के लिए स्क्रॉलिंग जोड़ता है।
  • संक्रमण आसान - पृष्ठ के शीर्ष पर जाने के लिए "आसान"।
  • लिंक स्थान - आइकन का स्थान। मानक से, बटन निचले दाएं कोने में स्थित है।
  • स्टाइल का उपयोग एक व्यक्तिगत बटन शैली है जिसे नीचे दिए गए फ़ील्ड में सेट किया जा सकता है। यदि इसे ऋणात्मक मान पर स्विच किया जाता है, तो सभी स्टाइल पैरामीटर साइट के सक्रिय विषय से लिया जाएगा।
  • लिंक स्टाइल - अपने स्वयं के बटन स्टाइल पैरामीटर दर्ज करने के लिए एक फ़ील्ड।

"अप" बटन की शैली को स्वतंत्र रूप से समायोजित करने के लिए, आपके पास सीसीएस के कम से कम न्यूनतम ज्ञान होना चाहिए। अन्यथा, अंतिम पैरामीटर के मान को "नहीं" पर स्विच करने के लायक है।

एक और महत्वपूर्ण बात यह है किआइकन पर सामान्य शिलालेख में अंग्रेजी पाठ होता है: शीर्ष पर वापस जाएं। रूसी भाषा साइट पर, ऐसा टेक्स्ट मौजूद नहीं हो सकता है, इसलिए आपको इसे प्लग-इन की सेटिंग्स में अक्षम करना चाहिए या इसे रूसी में बदलना चाहिए।

इस शिलालेख को बदलने के लिए, आपको जाना होगाहोस्टिंग में एम्बेडेड एफ़टीपी या फ़ाइल प्रबंधक का उपयोग कर साइट सर्वर। अगला, "/ व्यवस्थापक / भाषा / एन-जीबी /" निर्देशिका में, आपको "en-GB.plg_system_topofthepage.ini" नामक फ़ाइल ढूंढनी होगी।

टेक्स्ट बदलने से पहले, इस दस्तावेज़ के एन्कोडिंग को utf-8 में बदलें। इससे रूसी अक्षरों का सामान्य प्रदर्शन होगा।

अगला, हमें निम्न पंक्ति मिलती है:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" शीर्ष पर वापस लौटें ""

और वाक्यांश को रूसी में उद्धरण में बदलें। आप "टॉप!", "टॉप!" या "टॉप!" जैसे वाक्यांशों का उपयोग कर सकते हैं।

अंत में, आपको संशोधित फ़ाइल को सहेजने और जूमला साइट के लिए अप बटन की उपस्थिति की जांच करने की आवश्यकता होगी।

Ucoz ऊपर बटन

साइट के लिए स्क्रॉल अप बटन

यूकोज़ साइट के लिए अप बटन करना होगाकोड इंजेक्शन का उपयोग करके, चूंकि प्लग-इन इस सीएमएस से कनेक्ट नहीं हो सकते हैं। हालांकि, सिस्टम की फाइलों का अध्ययन करने और आवश्यक लाइनों को देखने में लंबा समय नहीं लगता है, आपको केवल सही जगह पर एक छोटा कोड डालना होगा।

स्थापना के लिए हमें इसकी आवश्यकता होगी:

  • "नियंत्रण कक्ष -> डिज़ाइन -> डिज़ाइन प्रबंधन (टेम्पलेट्स) पर जाएं -> साइट के नीचे;
  • एक स्क्रिप्ट डालें (परियोजना की आधिकारिक वेबसाइट और तृतीय पक्ष संसाधनों पर पाया जा सकता है)।

निष्कर्ष

इसके बाद, उपयोगकर्ता को निचले दाएं कोने में दिखाई देगा, जिससे उपयोगकर्ता पृष्ठ के शीर्ष पर जा सकेगा।

जैसा कि आप देख सकते हैं, के लिए "ऊपर" बटन की स्थापनासीएमएस में से कोई भी विशेष रूप से मुश्किल नहीं था। एक स्वचालित स्थापना विधि (प्लग-इन), और मैनुअल के रूप में इस्तेमाल किया जा सकता है। हालांकि, बाद वाला विकल्प सबसे उपयुक्त है, क्योंकि यह साइट के प्रदर्शन को प्रतिकूल रूप से प्रभावित नहीं करता है।

आप साइट के लिए ऊपर बटन का उपयोग कर सकते हैंएचटीएमएल साइट की संसाधन खपत को कम करने के लिए, क्योंकि बड़ी संख्या में एक्सटेंशन संसाधन की गति पर नकारात्मक प्रभाव डाल सकते हैं। "अप" बटन का एक प्लग-अप साइट पृष्ठों के लोडिंग समय को बहुत प्रभावित नहीं कर पाएगा, लेकिन ज्यादातर मामलों में उपयोगकर्ता के पास कम से कम दस प्लग-इन सीएमएस पर स्थापित होते हैं। इस मामले में, कोई भी प्लग-इन साइट पर पृष्ठों के प्रदर्शन को प्रतिकूल रूप से प्रभावित कर सकता है।

और पढ़ें: