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 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
js实现简单的秒表
Jan 16 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
香妃
2021/03/03 冲泡冲煮
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python实现复制整个目录的方法
2015/05/12 Python
python如何使用unittest测试接口
2018/04/04 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
Django视图类型总结
2021/02/17 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
金士达面试非笔试
2012/03/14 面试题
森林防火宣传标语
2014/06/27 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
2014年信访工作总结
2014/11/17 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
python实现双向链表原理
2022/05/25 Python