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实现密保互斥问题解决方案
Aug 16 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
小程序实现图片预览裁剪插件
Nov 22 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
区分vue-router的hash和history模式
Oct 03 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新手上路(十)
2006/10/09 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
如何使用php输出时间格式
2013/08/31 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
鼠标图片振动代码
2006/07/06 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
Python class的继承方法代码实例
2020/02/14 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
如何提高MySql的安全性
2014/06/19 面试题
好习惯伴我成长演讲稿
2014/05/21 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
民间借贷协议书范本
2014/10/01 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android