Kod pelaksanaan navigasi penimbal gelongsor dalam halaman web Jquery_jquery

Jika halaman web terlalu panjang dan memerlukan navigasi dalam halaman, kami biasanya menetapkan ID dalam sasaran, seperti 171c8477c82d74a9b2eea84eaab9316716b28748ea4df4d9c2150843fecfba68, dan kemudian menetapkannya dalam alamat pautan halaman semasa Contohnya: 1a50d8fcc32bd7be37c089cec3b9cadbKlik untuk menunjuk ke bahagian bawah5db79b134e9f6b82c0b36e0489ee08ed Mengklik pautan ini akan segera pergi ke bahagian bawah halaman web terus ke bawah Beberapa pengunjung akan keliru Kenapa tiba-tiba.

Hari ini, apabila kami memberi perhatian yang lebih kepada pengalaman pengguna, kami perlu menyelesaikan masalah ini. Berikut ialah kod Jquery yang mudah untuk melaksanakan navigasi dalam halaman melalui penimbalan gelongsor.

Berikut ialah kod:

<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">
jQuery.fn.anchorGoWhere = function(options){
  var obj = jQuery(this);
  var defaults = {target:0, timer:500};
  var o = jQuery.extend(defaults,options);
  obj.each(function(i){
   jQuery(obj[i]).click(function(){
    var _rel = jQuery(this).attr("href").substr(1);
    switch(o.target){
     case 1:
      var _targetTop = jQuery("#"+_rel).offset().top;
      jQuery("html,body").animate({scrollTop:_targetTop},o.timer);
      break;
     case 2:
      var _targetLeft = jQuery("#"+_rel).offset().left;
      jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer);
      break;
    }
   return false;
   });
  });
 };
 
$("#mybtn").anchorGoWhere({target:1}); //这里是点击按钮的ID
</script>

Di atas ialah kod pelaksanaan navigasi penimbal gelongsor dalam halaman web saya harap semua orang akan menyokong Script Home pada masa hadapan.