JQuery实现锚点平滑滚动
一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用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;
});
搞定了!
JQuery实现锚点平滑滚动的更多相关文章
- jquery详解图片平滑滚动
jquery详解图片平滑滚动 随便写了个DOM,没有美观性,见谅 原理: 1.定义两组ul列表放图,第一个ul放5张图,第二个ul为空 2.为什么要用两个ul?因为要用到jQuery的克隆方法clon ...
- jQuery实现锚点平滑定位
一般的锚点,就是点击一个按钮或者其他元素可以实现定位效果,当然可以使用锚点实现,但是这个不够美观,没有平滑的动画过渡效果,下面就通过代码实例介绍一下利用jquery实现平滑的定位效果. <!DO ...
- hash实现锚点平滑滚动定位
一.科普时间 hash hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分). location.hash=anchorname. 锚点 锚点是网页制作中超级链接 ...
- JQuery插件:ScrollTo平滑滚动到页面指定位置
1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...
- JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
- 【前端】jQuery实现锚点向下平滑滚动特效
jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...
- 使用jquery animate实现锚点慢慢平滑滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
随机推荐
- Android 内存使用hprof文件打开方法
http://blog.csdn.net/moruihong/article/details/7677128 与C++的内存不同,C++的内存泄露是由于分配了内存给某程序但是又没有回收造成的.Java ...
- PHP内存缓存功能memcached
PHP内存缓存功能memcached: http://blog.csdn.net/fangaoxin/article/details/6223383
- Egret P2 入门学习资料
1 p2库下载: https://github.com/egret-labs/egret-game-library/tree/rc/4.1.0 2 p2 作者demo:https://github.c ...
- 下载组件Jspsmartupload中文乱码解决办法
先用jdgui反编译jar包,得到源码,然后将源码拷贝到myeclipse中,注意路径是按照源码的路径 打开默认会有错误提示,稍微改改就解决了 1,打开“ SmartUpload.java ”,查 ...
- 香港主机Squid+Stunnel代理搭建
1.说明 Squid,代理软件 Stunnel,数据包加密(貌似如果数据不加密,客户端的数据流无法传到squid服务端,原因你懂的!) 2.Squid安装略 3.安装完squid后需要以下操作 a.生 ...
- jconsole远程连接超时问题解决方法
根据oracle网站上的文档,本地使用jconsole没有问题.但当我从windows连接到linux时(centos5.4)时,老是连接不上). 原因是Linux上JVM给jconsole的RMI配 ...
- 解决命令行执行shell脚本成功,但crontab执行失败
实际生产案例 生产机房自建PPTP客户端通过拨号连接到生产机房,但是一旦客户端网络是意外断线再重新拨号 会产生IP冲突,于是写了一个脚本监控PPTP的IP是否有多个(一般冲突以后会生成2个IP) #! ...
- 一次tns连接错误的解决过程
--同事hadoop连接oracle导入数据,界面报错,后台alert日志报错tns相关错误: **************************************************** ...
- 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 ...
- K-均值聚类(K-means)算法
https://www.cnblogs.com/ybjourney/p/4714870.html 最近在看<机器学习实战>这本书,因为自己本身很想深入的了解机器学习算法,加之想学pytho ...