Implementation code of sliding buffer navigation in Jquery web page

Implementation code of sliding buffer navigation in Jquery web page_jquery

WBOY

Release： 2016-05-16 16:05:50

Original

1231 people have browsed it

If the web page is too long and requires in-page navigation, we usually set the ID in the target, such as

, and then set it in a link address of the current page For example: Click to point to the bottom. Clicking this link will immediately go to the bottom of the web page. The default is to go directly to the bottom. Some visitors will be confused. Why? Suddenly the bottom is reached.

Today, as we pay more and more attention to user experience, we need to solve this problem. The following is a simple Jquery code to implement in-page navigation through sliding buffering. The user experience is greatly improved!

Here is the 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>

Copy after login

The above is the implementation code of sliding buffer navigation in the web page. I hope everyone will support Script Home in the future.