कैसे करें - चिकना स्क्रॉल
CSS के साथ सहज स्क्रॉलिंग प्रभाव बनाने का तरीका जानें।
स्मूद स्क्रॉलिंग
खंड 1
"चिकनी" स्क्रॉलिंग प्रभाव देखने के लिए लिंक पर क्लिक करें।
नीचे अनुभाग 2 तक स्क्रॉल करने के लिए मुझे क्लिक करेंनोट: स्मूथ स्क्रॉलिंग को हटाने के लिए स्क्रॉल-बिहेवियर प्रॉपर्टी को हटा दें।
स्मूद स्क्रॉलिंग
संपूर्ण पृष्ठ के लिए आसान स्क्रॉलिंग सक्षम करने के लिए <html> तत्व में जोड़ें scroll-behavior: smooth(नोट: इसे किसी विशिष्ट तत्व/स्क्रॉल कंटेनर में जोड़ना भी संभव है):
उदाहरण
html {
scroll-behavior: smooth;
}
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो स्क्रॉल-व्यवहार संपत्ति का पूरी तरह से समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| scroll-behavior | 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
क्रॉस-ब्राउज़र समाधान
उन ब्राउज़रों के लिए जो संपत्ति का समर्थन नहीं करते हैं, आप एक समाधान बनाने के लिए scroll-behaviorजावास्क्रिप्ट या जावास्क्रिप्ट लाइब्रेरी का उपयोग कर सकते हैं, जैसे jQuery , जो सभी ब्राउज़रों के लिए काम करेगा:
उदाहरण
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all
links
$("a").on('click', function(event) {
// Make sure this.hash
has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
//
Store hash
var hash = this.hash;
// Using jQuery's animate() method
to add smooth page scroll
// The optional number (800) specifies the number
of milliseconds it takes to scroll to the specified area
$('html,
body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
युक्ति: हमारे सीएसएस संदर्भ में स्क्रॉल-व्यवहार संपत्ति के बारे में और पढ़ें: सीएसएस स्क्रॉल-व्यवहार संपत्ति ।