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 ...
随机推荐
- LeetCode——Binary Search Tree Iterator
Description: Implement an iterator over a binary search tree (BST). Your iterator will be initialize ...
- split()有个坑
刚才在做DBMS课程设计的时候遇到了一个以前遇到过的问题不过这次我没有一眼认出来,想了好一会才想起来. 就是在用split()方法来分割路径名字符串的时候,比如 String path = “E:\s ...
- ajax解决跨域方法(适用于自己写接口解决跨域)
原因是这样的:最近用PHP开发了一个网站,这个网站需要提供接口,接口开发完成之后,在本地进行请求,跨域测试. jsonp处理跨域和用PHP函数来处理跨域就不说了. 现在说的使用用 header 这个来 ...
- Jmeter性能测试实践之java请求
前言 Apache Jmeter是开源.易用的性能测试工具,之前工作中用过几次对http请求进行性能测试,对jmeter的基本操作有一些了解.最近接到开发的对java请求进行性能测试的需求,所以需要 ...
- supervisor安装篇
服务器环境: [root@kafka60 supervisor-]# uname -a Linux kafka60 -.el6.x86_64 # SMP Tue May :: UTC x86_64 x ...
- js判断浏览器是否安装Flash插件,并提示安装或开启
var flashChecker = function() { var hasFlash = 0; //是否安装了flash var flashVersion = 0; //flash版本 if(do ...
- ASM学习记录
代理: 代理模式: 静态代理: 动态代理:是指在运行期动态的为指定的类生成其代理类.(需要相关的运行时编译技术) Javassist:Javassist是一个运行时编译库,他能动态的生成或修改类的字节 ...
- Oracle等待事件之Latch Free
1.产生原因 表示某个锁存器上发生了竞争.首先应该确保已经提供了足够多的Latch 数,如果仍然发生这种等待事件,那么应该进一步确定是那种锁存器上发生了竞争(在v$session_wait 上的P2 ...
- Oil Skimming---hdu4185(最大匹配)
题目链接 题意:有一个地图.代表水#代表油每个单元格是10*10的,现有10*20的勺子可以提取出水上漂浮的油,问最多可以提取几勺的油: 每次提取的时候勺子放的位置都要是油,不然就被污染而没有价值了: ...
- C++ Design Pattern: What is a Design Pattern?
Q: What is a Design Pattern? A: Design Patterns represent solutions to problems what arise when deve ...