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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
Python实现二分法算法实例
2015/02/02 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
企业宣传口号
2014/06/12 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2019新员工心得体会
2019/06/25 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python