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

इस लेख में, हम सहज स्क्रॉलिंग को लागू करने के दो तरीके तलाशेंगे:

• सीएसएस का उपयोग करना
• जावास्क्रिप्ट का उपयोग करना

आइए सबसे पहले सहज स्क्रॉलिंग के लिए सीएसएस का उपयोग करें।

स्मूथ स्क्रॉलिंग के लिए सीएसएस क्यों?

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

चरण 1: नेविगेशन बार बनाना

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

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

चरण 2: अनुभाग बनाना
अब जबकि हमारे पास हमारे नेविगेशन लिंक हैं, आइए संबंधित अनुभाग बनाएं।

हमने प्रत्येक नेविगेशन लिंक के लिए अनुभाग बनाए हैं।

चरण 3: स्क्रॉल करने योग्य सामग्री जोड़ना
काम को सुचारू रूप से स्क्रॉल करने के लिए, आपके पृष्ठ को स्क्रॉल करने के लिए पर्याप्त सामग्री की आवश्यकता होती है। आइए पृष्ठ को स्क्रॉल करने योग्य बनाने के लिए कुछ डमी टेक्स्ट जोड़ें।

आखिरकार हमारे पास अपने पेज को स्क्रॉल करने योग्य बनाने के लिए पर्याप्त सामग्री है।

चरण 4: नेविगेशन को अनुभागों से जोड़ना
जिन अनुभागों को हम स्क्रॉल करना चाहते हैं, उन्हें संदर्भित करने के लिए हम एंकर टैग की href विशेषता का उपयोग करेंगे। बस # के बाद संबंधित अनुभाग आईडी जोड़ें।

तो ऊपर की छवि से हम मूल रूप से जो कर रहे हैं वह उस अनुभाग को संदर्भित करने के लिए href विशेषता का उपयोग कर रहा है जहां हम चाहते हैं कि हमारे नेविगेशन लिंक जाएं।

चरण 5: उपयुक्त अनुभाग को उचित पहचानकर्ता (आईडी) निर्दिष्ट करें

तो अब हमने जो किया है वह बस प्रत्येक लिंक को उसके उचित अनुभाग में href विशेषता और आईडी के साथ निर्दिष्ट करना है। इसलिए #सेक्शन-वन के href के साथ एनएवी लिंक का आईडी सेक्शन-वन के एक सेक्शन से मिलान किया जाएगा

अब जब हम नेविगेशन लिंक पर क्लिक करते हैं तो हमें अनुभाग पर ले जाया जाता है।
लेकिन एक चीज़ है जिस पर हमने गौर किया, वह सहज नहीं है, पेज तुरंत उस अनुभाग पर पहुंच जाता है जो कोई अच्छा अनुभव नहीं है।

चरण 6: सीएसएस के साथ स्मूथ स्क्रॉल जोड़ना
सहज स्क्रॉलिंग सक्षम करने के लिए, HTML तत्व में एक एकल CSS प्रॉपर्टी जोड़ें।

जब हम अपने html में स्क्रॉल-व्यवहार गुण जोड़ते हैं, तो हम अपने नेविगेशन लिंक पर क्लिक करने पर सहज स्क्रॉलिंग प्रभाव देख सकते हैं।

यह काम किस प्रकार करता है

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

जिस अन्य तरीके से हम सहज स्क्रॉलिंग प्राप्त कर सकते हैं, वह है इसे संभालने के लिए जावास्क्रिप्ट का उपयोग करना।
हम इसे कुछ ही चरणों में भी हासिल कर सकते हैं:

ध्यान दें: प्रत्येक अनुभाग में अभी भी पहले की तरह निर्दिष्ट आईडी होगी।

चरण 1: एक स्क्रॉलइनटूव्यू फ़ंक्शन बनाएं

हम जावास्क्रिप्ट में एक फ़ंक्शन बना सकते हैं जो समान परिणाम प्राप्त करने के लिए स्क्रॉलइन्टोव्यू विधि का उपयोग करेगा। जैसे इतना:

चरण 2: लिंक पर क्लिक करने पर एंबेड फ़ंक्शन

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

आपके द्वारा विकास के लिए उपयोग किए जा रहे ढांचे के आधार पर इसे दोबारा भी तैयार किया जा सकता है।

यह दो सरल तरीके हैं जिनसे हम सहज ज्ञान युक्त वेबपेज बनाते समय सहज स्क्रॉलिंग प्राप्त कर सकते हैं।

यदि आपका कोई प्रश्न या प्रतिक्रिया है तो एक टिप्पणी छोड़ें।