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

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

WBOY

Libérer： 2016-05-16 16:05:50

original

1231 Les gens l'ont consulté

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

, puis le définissons dans un adresse du lien de la page actuelle Par exemple : Cliquez pour pointer vers le bas. 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>

Copier après la connexion

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.