一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用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">标签:&nbsp;<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;
});

搞定了!

JQuery实现锚点平滑滚动的更多相关文章

  1. jquery详解图片平滑滚动

    jquery详解图片平滑滚动 随便写了个DOM,没有美观性,见谅 原理: 1.定义两组ul列表放图,第一个ul放5张图,第二个ul为空 2.为什么要用两个ul?因为要用到jQuery的克隆方法clon ...

  2. jQuery实现锚点平滑定位

    一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果. <!DO ...

  3. hash实现锚点平滑滚动定位

    一.科普时间 hash hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分). location.hash=anchorname. 锚点 锚点是网页制作中超级链接 ...

  4. JQuery插件:ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

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

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  6. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  7. 使用jquery animate实现锚点慢慢平滑滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

  9. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

随机推荐

  1. Android 内存使用hprof文件打开方法

    http://blog.csdn.net/moruihong/article/details/7677128 与C++的内存不同,C++的内存泄露是由于分配了内存给某程序但是又没有回收造成的.Java ...

  2. PHP内存缓存功能memcached

    PHP内存缓存功能memcached: http://blog.csdn.net/fangaoxin/article/details/6223383

  3. Egret P2 入门学习资料

    1 p2库下载: https://github.com/egret-labs/egret-game-library/tree/rc/4.1.0 2 p2 作者demo:https://github.c ...

  4. 下载组件Jspsmartupload中文乱码解决办法

    先用jdgui反编译jar包,得到源码,然后将源码拷贝到myeclipse中,注意路径是按照源码的路径 打开默认会有错误提示,稍微改改就解决了 1,打开“  SmartUpload.java  ”,查 ...

  5. 香港主机Squid+Stunnel代理搭建

    1.说明 Squid,代理软件 Stunnel,数据包加密(貌似如果数据不加密,客户端的数据流无法传到squid服务端,原因你懂的!) 2.Squid安装略 3.安装完squid后需要以下操作 a.生 ...

  6. jconsole远程连接超时问题解决方法

    根据oracle网站上的文档,本地使用jconsole没有问题.但当我从windows连接到linux时(centos5.4)时,老是连接不上). 原因是Linux上JVM给jconsole的RMI配 ...

  7. 解决命令行执行shell脚本成功,但crontab执行失败

    实际生产案例 生产机房自建PPTP客户端通过拨号连接到生产机房,但是一旦客户端网络是意外断线再重新拨号 会产生IP冲突,于是写了一个脚本监控PPTP的IP是否有多个(一般冲突以后会生成2个IP) #! ...

  8. 一次tns连接错误的解决过程

    --同事hadoop连接oracle导入数据,界面报错,后台alert日志报错tns相关错误: **************************************************** ...

  9. Why do some system users have /usr/bin/false as their shell? What's the difference between /sbin/nologin and /bin/false

    https://www.quora.com/How-can-bin-true-and-bin-false-Linux-utilities-be-used MySQL :: MySQL 8.0 Refe ...

  10. K-均值聚类(K-means)算法

    https://www.cnblogs.com/ybjourney/p/4714870.html 最近在看<机器学习实战>这本书,因为自己本身很想深入的了解机器学习算法,加之想学pytho ...