JQuery 实现锚点链接之间的平滑滚动
来源:互联网 发布:酷音铃声mac版本 编辑:程序博客网 时间:2024/04/30 09:36
web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了。
从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动。以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码实现相同的效果。
还是再要强调一下加载的顺序,先引用JQuery 类库。顺便说一下,经测试,该滚动效果在各浏览器下都兼容适用,唯有在 Opera 下表现有点怪异,还有待改进。
从 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 下表现有点怪异,还有待改进。
2 0
- jquery实现锚点链接之间的平滑滚动
- JQuery 实现锚点链接之间的平滑滚动
- jQuery下实现锚点链接的平滑滚动
- jquery实现锚点链接平滑效果
- jquery实现html超链接锚点之间的平滑效果
- jquery实现页面内链接锚点跳转平滑滚动效果
- 用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部
- jQuery 锚点跳转滚动条平滑滚动
- jQuery实现的平滑滚动选项卡
- jQuery实现页面平滑滚动
- 网站锚点执行平滑滚动
- jquery实例代码:链接调整平滑滚动效果
- 定位锚平滑滚动jQuery代码
- jquery平滑滚动插件
- jquery 锚点滚动
- 图像平滑滚动效果的VC实现
- 图像平滑滚动效果的VC实现
- 轻松实现内容的无缝平滑滚动
- 写健壮的java代码读后感
- 解决struts2中validation.xml配置无效的问题
- HIVE 0.11版本的bug
- git学习(4)---工作流
- Windows多线程基础(6):线程间通信1(互锁函数、CriticalSection)
- JQuery 实现锚点链接之间的平滑滚动
- 黑客入门需要了解的8个简洁方便的安全工具
- 树莓派学习笔记(5):成功实现NAS家庭服务器(流媒体播放、文件共享及下载机)
- vijos P1790拓扑编号
- 浏览器新实用功能开发研究:单页富客户端应用的会话/视图状态复制及远程同步功能
- Andriod分辨率适配 Android UI 设计
- 各种排序算法的分析及java实现
- AngularJs--XHRs & Dependency Injection
- Linux TC(Traffic Control)框架原理解析