जावास्क्रिप्ट और सीएसएस के साथ पृष्ठ के निचले भाग तक स्क्रॉल को सुचारू कैसे करें

जावास्क्रिप्ट और थोड़े से सीएसएस के साथ उपयोगकर्ता को आसानी से एक लंबे वेब पेज के नीचे तक स्क्रॉल करना सीखें।

यदि आप अपने उपयोगकर्ताओं को किसी पृष्ठ के निचले भाग तक आसानी से स्क्रॉल करने की क्षमता देना चाहते हैं, तो आप scroll-behavior नामक CSS प्रॉपर्टी का उपयोग कर सकते हैं। और एक JavaScript विधि जिसे scrollIntoView() . कहा जाता है ।

आपको निम्न की आवश्यकता होगी:

आपके ब्राउज़र के दाईं ओर y-अक्ष स्क्रॉल बार को सक्रिय करने के लिए पर्याप्त सामग्री वाला एक लंबा वेब पेज
पृष्ठ के शीर्ष पर एक id . के साथ एक एंकर तत्व
कोई भी तत्व जिसमें आईडी हो पृष्ठ के निचले भाग में
द scroll-behavior सीएसएस संपत्ति
द scrollIntoView() जावास्क्रिप्ट संपत्ति

आइए उदाहरण के द्वारा सीखें!

HTML लेआउट उदाहरण

आप सीखने के लिए निम्नलिखित HTML मार्कअप उदाहरण का उपयोग कर सकते हैं (<p>....</p> dummy elements को बदलने के लिए स्वतंत्र महसूस करें। वास्तविक सामग्री के साथ):

<main>
  <p><a id="scroll-to-bottom">Scroll to bottom</a></p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p id="page-bottom">You have reached the bottom of this page!!</p>
</main>

ध्यान दें, हमारे पास एक एंकर तत्व है <a> scroll-to-bottom . की आईडी के साथ सबसे ऊपर , और नीचे एक तत्व page-bottom . की आईडी के साथ ।

CSS

आसान स्क्रॉलिंग सक्रिय करने के लिए, अपनी CSS स्टाइलशीट में निम्नलिखित जोड़ें:

html {
  scroll-behavior: smooth;
}

/* Layout */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

#scroll-to-bottom {
  font-weight: bold;
  color: green;
}

नोट:स्क्रॉल मैजिक scroll-behavior: smooth; . से आता है , ऊपर की बाकी सीएसएस स्टाइल पूरी तरह से कॉस्मेटिक है।

JavaScript

जब उपयोगकर्ता नीचे स्क्रॉल करें पर क्लिक करते हैं तो उपयोगकर्ता को पृष्ठ के ऊपर से नीचे तक आसानी से स्क्रॉल करने के लिए निम्नलिखित जावास्क्रिप्ट कोड जोड़ें:

let scrollToBottom = document.querySelector("#scroll-to-bottom")
let pageBottom = document.querySelector("#page-bottom")

scrollToBottom.addEventListener("click", function() {
  pageBottom.scrollIntoView()
})

JavaScript कोड कैसे काम करता है

पहले हम scroll-to-bottom . के संदर्भ में दो वैरिएबल घोषित करते हैं और page-bottom क्रमशः।
फिर हम इवेंट श्रोता को scrollToBottom . से जोड़ते हैं चर और इसे विशेष रूप से इवेंट पर क्लिक करने . को सुनने के लिए कहें
function() { .. } हम संलग्न करते हैं scrollIntoView() पेज बॉटम एलिमेंट के लिए मेथड pageBottom ।

अब जब भी कोई स्क्रॉल टू बॉटम . पर क्लिक करता है फ़ंक्शन scrollIntoView को निष्पादित करता है विधि और उपयोगकर्ता को नीचे तक स्क्रॉल करता है जहां page-bottom आईडी स्थित है।

नोट:यदि आप scroll-behavior: smooth; . को हटाते हैं स्क्रॉल अभी भी तकनीकी रूप से होगा, लेकिन यह अचानक होगा।

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

सभी डेमो कोड देखें।

स्क्रॉल टू बॉटम वास्तविक जीवन में कैसे उपयोगी है?

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

ब्राउज़र संगतता

scroll-behavior CSS गुण Internet Explorer या Safari के साथ संगत नहीं है। उन ब्राउज़रों के लिए, आपको शुद्ध जावास्क्रिप्ट समाधान की आवश्यकता होगी।