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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
Windows7下的php环境配置教程
2015/02/28 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python实现的各种排序算法代码
2013/03/04 Python
linux下python抓屏实现方法
2015/05/22 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python金融数据可视化汇总
2017/11/17 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
pycharm导入源码的具体步骤
2020/08/04 Python
用Python制作音乐海报
2021/01/26 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
取保候审保证书
2014/04/30 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
python 命令行传参方法总结
2021/05/25 Python