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 02 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 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中的多态性[译]
2011/08/02 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
毕业生自我鉴定
2013/12/04 职场文书
儿童生日会策划方案
2014/05/15 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
MySQL 语句执行顺序举例解析
2022/06/05 MySQL