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 相关文章推荐
jquery延迟加载外部js实现代码
Jan 11 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
python字符串连接方式汇总
2014/08/21 Python
python比较两个列表大小的方法
2015/07/11 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python如何测试stdout输出
2020/08/10 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
医院院务公开实施方案
2014/05/03 职场文书
七年级地理教学计划
2015/01/22 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL