Jquery网页内滑动缓冲导航的实现代码


Posted in Javascript onApril 05, 2015

如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<div id="footer"></div>,然后在当前页面某个链接地址设置如:<a href="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接转到底部,有的访客会莫名其妙,怎么突然就到底部了。

在越来越关注用户体验的今天,这点我们要解决,下面就是一段简单的Jquery代码,实现滑动缓冲的方式实现页内导航,用户体验大大提升!

下面是代码:

<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>

以上就是网页内滑动缓冲导航的实现代码,希望大家以后多多支持三水点靠木。

Javascript 相关文章推荐
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
javascript对象的创建和访问
Mar 08 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
javascript少儿编程关于返回值的函数内容
May 27 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 #Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 #Javascript
javascript Array 数组常用方法
Apr 05 #Javascript
javascript数据结构与算法之检索算法
Apr 04 #Javascript
使用jquery制作弹出框效果
Apr 03 #Javascript
javascript 实现map集合
Apr 03 #Javascript
jQuery制作简洁的图片轮播效果
Apr 03 #Javascript
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
Angularjs的启动过程分析
2017/07/18 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
js实现点击生成随机div
2020/01/16 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
横店影视城导游词
2015/02/06 职场文书
银行资信证明
2015/06/17 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
Python内置的数据类型及使用方法
2022/04/13 Python