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 相关文章推荐
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
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 中英文语言转换类
2011/09/07 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php curl选项列表(超详细)
2013/07/01 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
全面了解Python环境配置及项目建立
2016/06/30 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
小学社会实践活动总结
2014/07/03 职场文书
倡议书格式
2014/08/30 职场文书
坎儿井导游词
2015/02/09 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers