कैसे बनाएं: सामन्य स्क्रॉलिंग

CSS के इस्तेमाल से सामन्य गति के तरीके से स्क्रॉलिंग इफेक्ट बनाना सीखें।

स्मॉथ घुमाना

स्मॉथ घुमाना

html एलीमेंट के लिए जोड़ें scroll-behavior: smooth संपूर्ण पृष्ठ के लिए चालीसे अंदर घुमाना सक्षम करें

ध्यान दें:इसे विशिष्ट एलीमेंट/स्क्रॉल कंटेनर में भी जोड़ा जा सकता है

उदाहरण

html {
  scroll-behavior: smooth;
}

स्वयं को परीक्षण करें

ब्राउज़र समर्थन

तालिका में अंक को पूर्णतः समर्थित होने वाले पहले ब्राउज़र संस्करण को निर्दिष्ट किया गया है

ब्राउज़रों के लिए आम समाधान

जो टूट नहीं होते हैं scroll-behavior प्रतिरूप के ब्राउज़र के लिए आप JavaScript या JavaScript लाइब्रेरी (जैसे jQuery）के द्वारा सभी ब्राउज़रों के लिए एक समानता पूर्ण समाधान बनाएं:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // सभी लिंकों को चालीसे अंदर घुमाना जोड़ें
  $("a").on('click', function(event) {
    // डिफ़ॉल्ट व्यवहार को ओवरराइड करने से पहले यह सुनिश्चित करें कि this.hash में एक मूल्य है
    if (this.hash !== "") {
      // डिफ़ॉल्ट अंकटट्टा क्लिक व्यवहार को रोकें
      event.preventDefault();
      // हैश वैल्यू संचयित करें
      var hash = this.hash;
      // jQuery के animate() विधि का उपयोग करके चालीसे अंदर पृष्ठ घुमाना जोड़ें
      // वृद्धि अंक (800) को डिफ़ॉल्ट करें ताकि निर्दिष्ट क्षेत्र तक घुमाने के लिए मिलीसेकंडों की आवश्यकता हो
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // घुमाने पूर्ण होने के बाद URL में जी (hash) जोड़ें (डिफ़ॉल्ट क्लिक व्यवहार)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

स्वयं को परीक्षण करें

संबंधित पृष्ठ

संदर्भ दस्तावेजःCSS scroll-behavior विशेषता