JQuery 实现在同一页面锚点链接之间的平滑滚动


Posted in Javascript onOctober 29, 2014

web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了。

从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动。以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码实现相同的效果。

使用方法如下:

1、载入 JQuery 库;

2、关键代码:

$(document).ready(function() { 
$('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
var $target = $(this.hash); 
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); 
if ($target.length) { 
var targetOffset = $target.offset().top; 
$('html,body').animate({ 
scrollTop: targetOffset 
}, 
1000); 
return false; 
} 
} 
}); 
});

还是再要强调一下加载的顺序,先引用JQuery 类库。顺便说一下,经测试,该滚动效果在各浏览器下都兼容适用,唯有在 Opera 下表现有点怪异,还有待改进。

Javascript 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
js中的json对象详细介绍
Oct 29 #Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 #Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 #Javascript
JavaScript中的迭代器和生成器详解
Oct 29 #Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 #Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 #Javascript
jQuery中parents()和parent()的区别分析
Oct 28 #Javascript
You might like
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP使用递归生成文章树
2015/04/21 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
类似框架的js代码
2006/11/09 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
庆元旦迎新年广播稿
2014/02/18 职场文书
大学生求职信
2014/06/17 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
Django migrate报错的解决方案
2021/05/20 Python