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 each()小议
Mar 18 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
vue 更改连接后台的api示例
Nov 11 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
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
脚本合并提升javascript性能示例
2014/02/24 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
element中的$confirm的使用
2020/04/26 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
简单谈谈python基本数据类型
2018/09/26 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Python网页解析器使用实例详解
2020/05/30 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
韩语专业本科生求职信
2013/10/01 职场文书
高中军训感言1000字
2014/03/01 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
旷工检讨书1000字
2015/01/01 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
金陵十三钗观后感
2015/06/04 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js