Code d'implémentation de la navigation dans le tampon coulissant dans la page Web Jquery_jquery

Si la page Web est trop longue et nécessite une navigation dans la page, nous définissons généralement l'ID dans la cible, tel que 171c8477c82d74a9b2eea84eaab9316716b28748ea4df4d9c2150843fecfba68, puis le définissons dans un adresse du lien de la page actuelle Par exemple : 1a50d8fcc32bd7be37c089cec3b9cadbCliquez pour pointer vers le bas5db79b134e9f6b82c0b36e0489ee08ed. En cliquant sur ce lien, vous accédez immédiatement au bas de la page Web. directement vers le bas. Certains visiteurs seront confus. Pourquoi soudainement le fond est atteint.

Aujourd'hui, alors que nous accordons de plus en plus d'attention à l'expérience utilisateur, nous devons résoudre ce problème. Ce qui suit est un code Jquery simple pour implémenter la navigation dans la page via la mise en mémoire tampon coulissante. L'expérience utilisateur est grandement améliorée !

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

Ce qui précède est le code d'implémentation de la navigation par tampon coulissant dans la page Web. J'espère que tout le monde prendra en charge Script Home à l'avenir.