इस मूल स्मूथ-स्क्रॉलिंग प्रभाव के साथ उपयोग करने के लिए अपने समान-पृष्ठ लिंक को थोड़ा बेहतर बनाएं।

स्मूथ स्क्रॉलिंग एक ऐसी तकनीक है जिसका उपयोग वेब विकास में उपयोगकर्ताओं के लिए एक तरल स्क्रॉलिंग अनुभव बनाने के लिए किया जाता है। यह डिफ़ॉल्ट अचानक उछाल के बजाय स्क्रॉल मूवमेंट को एनिमेट करके वेबपेज के भीतर नेविगेशन को बढ़ाता है।

वेब डेवलपर्स के लिए यह व्यापक मार्गदर्शिका आपको जावास्क्रिप्ट का उपयोग करके सहज स्क्रॉलिंग लागू करने में मदद करेगी।

स्मूथ स्क्रॉलिंग तब होती है जब कोई वेबपेज तुरंत वहां जाने के बजाय वांछित सेक्शन तक आसानी से स्क्रॉल करता है। यह उपयोगकर्ता के लिए स्क्रॉलिंग अनुभव को अधिक सुखद और सहज बनाता है।

सहज स्क्रॉलिंग किसी वेबपेज के उपयोगकर्ता अनुभव को कई तरीकों से बेहतर बना सकती है:

  • यह अचानक और घबराहट वाले स्क्रॉल जंप को खत्म करके, लालित्य का स्पर्श जोड़कर दृश्य अपील को बढ़ाता है।
  • यह एक तरल और निर्बाध स्क्रॉलिंग अनुभव प्रदान करके उपयोगकर्ता की सहभागिता को प्रोत्साहित करता है। यह, बदले में, उपयोगकर्ताओं को सामग्री को और अधिक जानने के लिए प्रेरित करता है।
  • अंत में, सहज स्क्रॉलिंग उपयोगकर्ताओं के लिए नेविगेशन को आसान बनाती है, खासकर जब लंबे वेब पेजों से निपटना हो या विभिन्न अनुभागों के बीच जाना हो।
    instagram viewer

सुचारू स्क्रॉलिंग लागू करने के लिए, आप जावास्क्रिप्ट का उपयोग करके डिफ़ॉल्ट स्क्रॉल व्यवहार को संशोधित कर सकते हैं।

HTML संरचना

सबसे पहले, विभिन्न व्यूपोर्ट और उनके बीच स्क्रॉल करने के लिए नेविगेशन के लिए आवश्यक मार्कअप तत्व बनाएं।

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

इस HTML में एक नेविगेशन बार होता है जिसमें तीन एंकर टैग होते हैं। प्रत्येक एंकर की href विशेषता लक्ष्य अनुभाग के विशिष्ट पहचानकर्ता को निर्दिष्ट करती है (उदाहरण के लिए अनुभाग 1, अनुभाग 2, अनुभाग 3)। यह सुनिश्चित करता है कि आपके द्वारा क्लिक किया गया प्रत्येक लिंक संबंधित लक्ष्य तत्व पर नेविगेट करता है।

सीएसएस स्टाइलिंग

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

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

जावास्क्रिप्ट कार्यान्वयन

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

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

अपना JavaScript कोड इसमें जोड़ें स्क्रिप्ट.जे.एस फ़ाइल। कुछ और करने से पहले DOMContentLoaded इवेंट को सक्रिय करने के लिए सुनकर शुरुआत करें। यह सुनिश्चित करता है कि कॉलबैक केवल चलता है जब DOM पूरी तरह लोड हो जाए और हेरफेर करने के लिए तैयार है.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

अगला, परिभाषित करें मेकलिंकस्मूथ() समारोह। नेविगेशन में एंकर टैग का चयन करके शुरुआत करें, क्योंकि आप उनके व्यवहार को संशोधित करना चाहेंगे। फिर, प्रत्येक लिंक पर पुनरावृति करें, और उसके क्लिक इवेंट के लिए एक इवेंट श्रोता जोड़ें।

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

अंत में, परिभाषित करें स्मूथस्क्रॉल() फ़ंक्शन जो एक इवेंट श्रोता ऑब्जेक्ट लेता है। जब आप लिंक पर क्लिक करते हैं तो यह सुनिश्चित करने के लिए कि ब्राउज़र अपनी डिफ़ॉल्ट कार्रवाई नहीं करता है, stopDefault() पर कॉल करें। इसके बाद आने वाला कोड इसे प्रतिस्थापित कर देगा.

वर्तमान एंकर टैग का href मान लें और इसे एक वेरिएबल में संग्रहीत करें। वह मान लक्ष्य अनुभाग की आईडी होना चाहिए, उपसर्ग "#" के साथ, इसलिए अनुभाग के तत्व का चयन करने के लिए इसका उपयोग करें क्वेरी चयनकर्ता(). यदि targertElement मौजूद है, तो उसे चलाएँ देखने के लिए स्क्रॉल करें विधि और प्रभाव को पूरा करने के लिए ऑब्जेक्ट पैरामीटर में "सुचारू" व्यवहार पास करें।

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

इसके साथ, जब आप किसी लिंक पर क्लिक करेंगे तो आपका तैयार वेबपेज प्रत्येक अनुभाग पर आसानी से स्क्रॉल हो जाएगा:

स्मूथ-स्क्रॉलिंग अनुभव को और बेहतर बनाने के लिए, आप कुछ पहलुओं को बेहतर कर सकते हैं।

आप इसका उपयोग करके स्क्रॉल की ऊर्ध्वाधर स्थिति को समायोजित कर सकते हैं अवरोध पैदा करना सेटिंग्स तर्क की संपत्ति। स्क्रॉल करने के लिए लक्ष्य तत्व के भाग की पहचान करने के लिए "प्रारंभ," "केंद्र," या "अंत" जैसे मानों का उपयोग करें:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

सहजता प्रभाव जोड़ना

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

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

सुनिश्चित करें कि आपका सुचारू स्क्रॉलिंग कार्यान्वयन विभिन्न ब्राउज़रों पर लगातार काम करता है। किसी भी ब्राउज़र-विशिष्ट विचित्रता या विसंगतियों का परीक्षण करें और उन्हें संभालें जो उत्पन्न हो सकती हैं।

आप जैसी वेबसाइट का उपयोग कर सकते हैं क्या मैं उपयोग कर सकता हूँ निर्माण करते समय ब्राउज़र समर्थन का परीक्षण करने के लिए। क्रॉस-ब्राउज़र संगतता सुनिश्चित करने और सभी उपयोगकर्ताओं के लिए एक सहज अनुभव प्रदान करने के लिए जावास्क्रिप्ट लाइब्रेरी या पॉलीफ़िल का उपयोग करने पर विचार करें।

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

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