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

, dan kemudian menetapkannya dalam alamat pautan halaman semasa Contohnya: Klik untuk menunjuk ke bahagian bawah 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.