JQuery简单实现锚点链接的平滑滚动


Posted in Javascript onMay 03, 2015

一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果:

比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里。

<a id="turnToContent" href="#content"></a>

然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章。最好将此div放在靠后的位置,这样效果就很明显一点,如果只是测试一下这个效果,可以用简单粗暴的方法,在其前面放很多个<p>标签即可。

<div id="content">
<h2>
<a href="###">HTML5</a>
</h2>
<p>
html5html5html5
</p>
<p class="addMes">标签: <span>HTML5</span><small>2015年4月19日</small></p>
</div>

最后就是用JQuery来实现平滑过渡的效果了:

$('#turnToContent').click(function () {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});

搞定了!

下面我们来继续改进一下,

$(function(){  
  $('a[href*=#],area[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;
      }
    }
  });
})

改进后的代码的好处是点击锚点链接平滑滚动到锚点,并且浏览器URL后缀不带有锚点字样,使用的过程中基本不用修改以上代码即可实现。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
jQuery中 attr() 方法使用小结
May 03 #Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 #Javascript
jQuery的几个我们必须了解的特点
May 03 #Javascript
jQuery的css() 方法使用指南
May 03 #Javascript
面向切面编程(AOP)的理解
May 01 #Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 #Javascript
使用AOP改善javascript代码
May 01 #Javascript
You might like
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
低版本中Python除法运算小技巧
2015/04/05 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python如何获取文件路径/目录
2020/09/22 Python
材料物理专业大学毕业生求职信
2013/10/15 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
作弊检讨书1000字
2014/02/01 职场文书
五年级科学教学反思
2014/02/05 职场文书
户外宣传策划方案
2014/05/25 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
女儿满月酒致辞
2015/07/29 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL