Jquery网页内滑动缓冲导航的实现代码
如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<divid="footer"></div>,然后在当前页面某个链接地址设置如:<ahref="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接转到底部,有的访客会莫名其妙,怎么突然就到底部了。
在越来越关注用户体验的今天,这点我们要解决,下面就是一段简单的Jquery代码,实现滑动缓冲的方式实现页内导航,用户体验大大提升!
下面是代码:
<scriptsrc="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<scripttype="text/javascript">
jQuery.fn.anchorGoWhere=function(options){
varobj=jQuery(this);
vardefaults={target:0,timer:500};
varo=jQuery.extend(defaults,options);
obj.each(function(i){
jQuery(obj[i]).click(function(){
var_rel=jQuery(this).attr("href").substr(1);
switch(o.target){
case1:
var_targetTop=jQuery("#"+_rel).offset().top;
jQuery("html,body").animate({scrollTop:_targetTop},o.timer);
break;
case2:
var_targetLeft=jQuery("#"+_rel).offset().left;
jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer);
break;
}
returnfalse;
});
});
};
$("#mybtn").anchorGoWhere({target:1});//这里是点击按钮的ID
</script>
以上就是网页内滑动缓冲导航的实现代码,希望大家以后多多支持毛票票。
热门推荐
10 信耶稣的人祝福语简短
11 道士结婚文案祝福语简短
12 老年 生日祝福语大全简短
13 新年祝福语长篇文案简短
14 老师祝福语简短100字
15 周日徒步祝福语大全简短
16 动心的生日祝福语简短
17 老爸生日暴富祝福语简短
18 八十大寿简短祝福语