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 相关文章推荐
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
详解php协程知识点
2018/09/21 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
详解django模板与vue.js冲突问题
2019/07/07 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
使用Python对MySQL数据操作
2017/04/06 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python 日期与时间转换的方法
2020/08/01 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
干部现实表现材料
2014/02/13 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
全国文明单位申报材料
2014/05/31 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Python Numpy库的超详细教程
2022/04/06 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技