Jquery web pages in the implementation of the sliding buffer navigation code

If the page is too long and needs in-page navigation, we usually set ID on target, for example < div id="footer" > < /div > , and then set a link address on the current page as follows: < a href="#footer" > Click to point to the bottom < /a > ", so that after clicking the link will immediately go to the bottom of the page, the default is to go directly to the bottom, some visitors will be puzzled, how suddenly to the bottom.

Today, we are paying more and more attention to user experience, so we need to solve this problem. The following is a simple Jquery code, which realizes in-page navigation by means of sliding buffer. The user experience is greatly improved!

Here's 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}); // Here you click the button ID
</script>