Implementierungscode der Gleitpuffernavigation in Jquery web page_jquery

Wenn die Webseite zu lang ist und eine In-Page-Navigation erfordert, legen wir normalerweise die ID im Ziel fest, z. B.

, und legen sie dann in a fest Linkadresse der aktuellen Seite Zum Beispiel: Klicken Sie, um nach unten zu zeigen. Durch Klicken auf diesen Link gelangen Sie sofort zum Ende der Webseite direkt nach unten. Einige Besucher werden verwirrt sein. Warum ist der Boden plötzlich erreicht?

Da wir heute immer mehr auf die Benutzererfahrung achten, müssen wir dieses Problem lösen. Das Folgende ist ein einfacher JQuery-Code zur Implementierung der In-Page-Navigation durch gleitende Pufferung.

Hier ist der Code:

<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>

Das Obige ist der Implementierungscode der Schiebepuffernavigation auf der Webseite. Ich hoffe, dass in Zukunft jeder Script Home unterstützen wird.