Heim > Artikel > Web-Frontend > 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. 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.