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 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python实现自动网页截图并裁剪图片
2018/07/30 Python
python机器学习之神经网络实现
2018/10/13 Python
python实现复制大量文件功能
2019/08/31 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
大学军训感言200字
2014/02/26 职场文书
住宅质量保证书
2014/04/29 职场文书
村道德模范事迹材料
2014/08/28 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server