Heim  >  Artikel  >  Web-Frontend  >  Implementierungscode der Gleitpuffernavigation in Jquery web page_jquery

Implementierungscode der Gleitpuffernavigation in Jquery web page_jquery

WBOY
WBOYOriginal
2016-05-16 16:05:501216Durchsuche

Wenn die Webseite zu lang ist und eine In-Page-Navigation erfordert, legen wir normalerweise die ID im Ziel fest, z. B. 171c8477c82d74a9b2eea84eaab9316716b28748ea4df4d9c2150843fecfba68, und legen sie dann in a fest Linkadresse der aktuellen Seite Zum Beispiel: 1a50d8fcc32bd7be37c089cec3b9cadbKlicken Sie, um nach unten zu zeigen.5db79b134e9f6b82c0b36e0489ee08ed 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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn