Implementation code of sliding buffer navigation in Jquery web page_jquery

If the web page is too long and requires in-page navigation, we usually set the ID in the target, such as 171c8477c82d74a9b2eea84eaab9316716b28748ea4df4d9c2150843fecfba68, and then set it in a link address of the current page For example: 1a50d8fcc32bd7be37c089cec3b9cadbClick to point to the bottom5db79b134e9f6b82c0b36e0489ee08ed. 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>

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