क्रॉस-ब्राउज़र जावास्क्रिप्ट स्क्रॉल टू टॉप एनिमेशन (बिना jQuery)

कई वेब डेवलपर निर्बाध पेज स्क्रॉलिंग कार्यक्षमता के लिए jQuery पर भरोसा करते हैं। हालाँकि, जो लोग बाहरी पुस्तकालयों से बचना पसंद करते हैं, उनके लिए शुद्ध जावास्क्रिप्ट का उपयोग करके पृष्ठ के शीर्ष तक स्क्रॉल करना एक सीधा समाधान है।

क्रॉस-ब्राउज़र स्क्रॉल से शीर्ष एनीमेशन प्राप्त करने के लिए, इन चरणों का पालन करें:

1. स्क्रॉलटू फ़ंक्शन को परिभाषित करें: एक फ़ंक्शन बनाएं जो तीन पैरामीटर लेता है: तत्व, टू, और अवधि। यह फ़ंक्शन एनीमेशन को संभालेगा। &&&]: फ़ंक्शन के अंदर, वर्तमान स्क्रॉल स्थिति और वांछित स्थिति (से) के बीच अंतर की गणना करें और प्रति-टिक वृद्धि निर्धारित करने के लिए इसे अवधि से विभाजित करें।

   function scrollTo(element, to, duration) {

2. एनीमेशन लूप सेट करें: 10 मिलीसेकंड की आवृत्ति पर चलने वाले एनीमेशन लूप को सेट करने के लिए सेटटाइमआउट का उपयोग करें। लूप के भीतर, स्क्रॉल स्थिति को प्रति-टिक वृद्धि से बढ़ाएं, जांचें कि वांछित स्थिति तक पहुंच गया है या नहीं।

     if (duration 

3. उपयोग: किसी पृष्ठ के शीर्ष पर आसानी से स्क्रॉल करने के लिए, स्क्रॉलटो फ़ंक्शन को इस तरह कॉल करें:

     setTimeout(function() {
    element.scrollTop = element.scrollTop   perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

4. एक क्लिक इवेंट श्रोता जोड़ें: यदि आपके पास कोई लिंक या बटन है जो स्क्रॉल एनीमेशन को ट्रिगर करना चाहिए, क्लिक करने पर फ़ंक्शन को कॉल करने के लिए एक क्लिक ईवेंट श्रोता जोड़ें। var स्क्रॉलमे = document.querySelector("#स्क्रॉलमे"); स्क्रॉलमे.एडइवेंटलिस्टनर ("क्लिक", रनस्क्रॉल, गलत);

   scrollTo(document.body, 0, 600);

   यह शुद्ध जावास्क्रिप्ट कोड क्रॉस-ब्राउज़र स्क्रॉल को शीर्ष एनिमेशन तक प्राप्त करने का एक सरल लेकिन प्रभावी तरीका प्रदान करता है, जिससे आप उपयोगकर्ता को बढ़ा सकते हैं jQuery जैसे बाहरी पुस्तकालयों की आवश्यकता के बिना नेविगेशन।