核心代码：$('html,body').animate({scrollTop: $('.'+cl+'_content').offset().top}, 1500);
让滚动条在指定时间内，滚动到指定元素的位置。
scrollTop 相对滚动条顶部的偏移
offset获取元素偏移量.top表示获取元素距离顶端的位置，.left表示获取元素距离左侧的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animate锚点链接示例</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.first,.second,.third').click(function(){
var cl = $(this).attr('class');
$('html,body').animate({scrollTop: $('.'+cl+'_content').offset().top}, 1500);
})
})
</script>
</head>
<body>
<a href="javascript:;" class="first">第一章</a>
<a href="javascript:;" class="second">第二章</a>
<a href="javascript:;" class="third">第三章</a>
<h4 class="first_content">第一章</h4>
<div>
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
第一章节内容<br />
</div>
<h4 class="second_content">第二章</h4>
<div>
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
第二章节测试 链接查一查器<br />
</div>
<h4 class="third_content">第三章</h4>
<div>
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
第三章节 对代码进行修改<br />
</div>
<a href="javascript:;" class="first">第一章</a>
<a href="javascript:;" class="second">第二章</a>
<a href="javascript:;" class="third">第三章</a>
</body>
</html>
相关推荐
jQuery页面滚动显示浮动菜单栏锚点定位效果
jquery网页浮动导航点击锚点链接屏幕滚动
此插件把一个简单网站的所有功能都集成在一个页面上，利用锚点的方式滑动到相应的菜单对应的模块，非常实用，是一种新型的设计模式，值得借鉴，网友可以学习哦。
因公司后台管理系统很多功能技术老旧，最近在用vue重构公司的后台管理系统，在做商品管理添加商品这一块，借鉴淘宝的添加商品的交互，需要实现一个简单的吸顶、锚点和滚动高亮按钮的效果。 需求 滚动页面到顶部，...
jquery锚点带动画跳转返回顶部特效，可定位到网页的相应模块，多种方式回到网页顶部效果，第一种方式是最初打开页面的时候，点击最上边的导航按钮，可进入本页面相应的区域。第二种方式是，拖动滚动条之后，网页右侧...
平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以...
固定在页面右侧的锚点链接导航菜单，点击对应的导航栏目页面自动滚动到对应的锚链接名所在的位置，当前导航以抽屉式从右往左滑出显示，图标与CSS样式经过了加密处理，如果想要修改的话也可以自行修改使用，主要还是...
以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效，效果相当不错，可以在同一页面的锚点链接之间实现平滑的滚动，但是 JS 代码相对来说比较冗长，现在好了，只要已经加载了 JQuery，我们就可以用较为简短的代码实现...
在平时的项目中，我们经常需要一些特效链接，如果使效果进一步加强，我们可以使点击锚点链接平滑滚动到锚点，下面就来给大家讲解下如何使用jQuery来实现。
使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ [removed].hash = hash; }); 简单实例代码： <!DOCTYPE html> <html> &...
js 仿锚点跳转到页面指定位置，用的是 offset() 方法 $(document).ready(function(){ var target_top = $("#qa5").offset().top; //$("html,body").animate({scrollTop: target_top}, 1000); //带滑动效果的跳转 ...
采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。 滚动到顶部： 代码如下:$(‘.scroll_top...
9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...
平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上...
1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 ...
2、滚动页面的时候，菜单项的选中状态要跟着改变，这就需要监听网页的滚动事件并通过一点计算来实现了； 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系，判断现在网页显示的位置在什么地方，再根据计算的...
jQuery文章目录索引导航菜单代码是一款点击导航锚点页面滚动到相应的文章内容效果代码。 jQuery文章目录索引导航菜单代码截图
当页面过长时，通常会在页面下方有一个返回顶部的button，总结一下，大概三种实现方法...这种方法也很方便，并且不会刷新页面，缺点是没有滚动效果。 scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标，