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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 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者的疑难问答(1)
2006/10/09 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
smarty实现多级分类的方法
2014/12/05 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
如何编写python的daemon程序
2021/01/07 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
中学家长会邀请函
2014/02/03 职场文书
于丹论语心得观后感
2015/06/15 职场文书
祝酒词范文
2015/08/12 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript