ఎలా సృష్టించాలి: సులభంగా స్క్రాల్

ఎలా CSS ఉపయోగించి సులభంగా స్క్రాల్ ప్రభావాన్ని సృష్టించాలి.

స్మోత్తమైన స్క్రోల్

స్మోత్తమైన స్క్రోల్

ఎచ్‌టిఎమ్ఎల్ ఎలమెంట్కు scroll-behavior: smooth మొత్తం పేజీని స్మోత్తమైన స్క్రోల్ చేయడానికి అనుమతిస్తుంది:

గమనికఈ సంకేతాన్ని క్లిక్ చేయండి, ముంది పార్ట్‌లో స్మోత్తమైన స్క్రోల్ చేయండి.

మున్నటి పరిశీలన

కూడా ప్రత్యేక ఎలమెంట్/స్క్రోల్ కంటైనర్లకు జోడించవచ్చు.
  ఉదా
html {

స్వయంగా ప్రయత్నించండి

scroll-behavior: smooth;

}

కాక్రస్‌బ్రౌజర్ పరిష్కారం

మద్దతు లేని బ్రౌజర్లకు scroll-behavior సమాచారం కలిగిన బ్రౌజర్లకు, మీరు జావాస్క్రిప్ట్ లేదా జావాస్క్రిప్ట్ లైబ్రరీ (ఉదా,) 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) {
    // డిఫాల్ట్ ప్రవర్తనను ముందుకు కదించే ముందు, ఈహాశ్‌ష్‌విలువ విలువ ఉన్నదా నిర్ధారించండి
    if (this.hash !== "") {
      // డిఫాల్ట్ అంకర్ క్లిక్ ప్రవర్తనను నిరోధించండి
      event.preventDefault();
      // హెచ్‌ష్‌విలువను నిల్వ చేయండి
      var hash = this.hash;
      // jQuery యొక్క animate() మాదిరిగా స్మోత్తమైన పేజీ స్క్రోల్ జోడించండి
      // ఎంపికాత్మక సంఖ్యలు (800) స్పెషిఫైచిన ప్రాంతానికి స్క్రోల్ అయ్యే మిల్లీసెకన్లు నిర్దేశించండి
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // పూర్తి స్క్రోల్ అనంతరం, హెచ్‌ష్‌పై యూఆర్ఎల్‌కు హాశ్‌ను జోడించండి (డిఫాల్ట్ క్లిక్ ప్రవర్తన)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

స్వయంగా ప్రయత్నించండి

相关页面

参考手册：CSS scroll-behavior 属性