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 相关文章推荐
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 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
模仿OSO的论坛(三)
2006/10/09 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php 高效率写法 推荐
2010/02/21 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
基于bootstrap实现收缩导航条
2017/03/17 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python协程用法实例分析
2015/06/04 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
详解【python】str与json类型转换
2019/04/29 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python实现拼图小游戏
2020/02/22 Python
python实现拼接图片
2020/03/23 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
橄榄树药房:OLIVEDA
2019/09/01 全球购物
大跃进口号
2014/06/16 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
整改落实自查报告
2014/11/05 职场文书
房产公证书
2015/01/23 职场文书
学期个人自我总结
2015/02/13 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书