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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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&java(二)
2006/10/09 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python实现PID算法及测试的例子
2019/08/08 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
火山动力Java笔试题
2014/06/26 面试题
生产副总岗位职责
2013/11/28 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
小学生暑假感言
2014/02/06 职场文书
《争吵》教学反思
2014/02/15 职场文书
服务质量承诺书
2014/03/27 职场文书
销售经理竞聘书
2014/03/31 职场文书
员工合理化建议书
2014/05/19 职场文书
银行奉献演讲稿
2014/09/16 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js