jQuery实现页面锚点滚动效果

<!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="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	$('.first,.second,.third').click(function(){

		var cl = $(this).attr('class');

		$('#aaa').animate({scrollTop: $('.'+cl+'_content').offset().top-30}, 500);

	})

})

</script>

</head>

<body>

<a href="javascript:;" class="first">第一章</a>

<a href="javascript:;" class="second">第二章</a>

<a href="javascript:;" class="third">第三章</a>

<div id="aaa" style="width:600px;height:400px;overflow-y:scroll;">

<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>

</div>

<a href="javascript:;" class="first">第一章</a>

<a href="javascript:;" class="second">第二章</a>

<a href="javascript:;" class="third">第三章</a>

</body>

</html>

核心代码：$('html,body').animate({scrollTop: $('.'+cl+'_content').offset().top}, 1500);

让滚动条在指定时间内，滚动到指定元素的位置。

scrollTop 相对滚动条顶部的偏移

offset获取元素偏移量.top表示获取元素距离顶端的位置，.left表示获取元素距离左侧的位置

jQuery实现页面锚点滚动效果的更多相关文章

marquee标签实现页面内容的滚动效果
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
jQuery实现页面导航内容定位效果，并支持内容切换
需求页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...
Javascript实现导航锚点滚动效果实例
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页 ...
CSS和jQuery分别实现图片无缝滚动效果
一.效果图二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
jquery实现页面控件拖动效果js代码
;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...
基于jquery实现页面loading加载效果
实现loading 加载提示 ······ 透明遮罩居中效果具体代码如下: CSS样式部分: <style type="text/css"> .background ...
jQuery控制页面滚动条上下滚动
.向上滚动 $(); .向下滚动 $(); 参数解读:$(this)表示要实现上下滚动的对象,-50表示向上滚动50px , +50表示向下滚动50px ,1000表示滚动速度

随机推荐

iphone学习
苹果开发者联盟的网址:http://www.apple.com.cn/developer/ objective-C on the Mac (Aoress) 作者:Dakrymple ...
VS2017 +NetCore2.2.0+WebApi项目整合SwaggerUI 以及遇到的坑
1.新建一个WebApi项目,这里不说了. 2.打开项目nuget管理控制台,在 https://www.nuget.org/ 搜索swagger的包:Swashbuckle.AspNetCore , ...
priority_queue实现
#include <algorithm> using namespace std; /* priority_queue只允许在底端加入元素,并从顶端取出元素, 其内部元素不是依照被推入的次 ...
Windows 9立即公布了
Windows 9技术预览版可能于今晚在美国旧金山举办的Windows公布会上宣布.下一代的Windows名称最有可能是Windows或Windows 9.网友猜想也可能是WIndows X或Wind ...
nmap，port扫描，获取sshserver的ip地址
// 查看局域网的ip地址 arp - a // 同一个网段.假设用虚拟机桥接则不行 sudo nmap -sS 192.168.1.* //或者sudo nmap -sS -p 22 192.168 ...
Android首次启动时间长优化之预编译提取Odex
提示!应用程序的安装有两种情况,第一:首次启动系统时安装.第二:系统启动完毕后安装. 本篇博文基于第一种安装场景.在系统首次启动的场景中,系统会对/system/app./system/pri ...
<感悟帖>互联网与电子传统行业之经历
依据鄙人浅显的实习.毕业工作经验以及个人思考得此文. 鄙人有幸在BAT中的B实习,以及某电子行业科研机构工作,略有心得.总结例如以下.也算是对自己的一个交待和反省. 鄙人小硕毕业211学校非985,C ...
POJ 2367：Genealogical tree（拓扑排序）
Genealogical tree Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2738 Accepted: 1838 Spe ...
oc71--NSArray2
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject - (void)say; - ( ...
poj 2104 K-th Number 主席树+超级详细解释
poj 2104 K-th Number 主席树+超级详细解释传送门:K-th Number 题目大意:给出一段数列,让你求[L,R]区间内第几大的数字! 在这里先介绍一下主席树! 如果想了解什么是 ...

jQuery实现页面锚点滚动效果

jQuery实现页面锚点滚动效果的更多相关文章

随机推荐

热门专题