<!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实现页面锚点滚动效果的更多相关文章

  1. marquee标签实现页面内容的滚动效果

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  2. jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...

  3. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  4. jQuery实现页面导航内容定位效果，并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  5. Javascript实现导航锚点滚动效果实例

    本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页 ...

  6. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  7. jquery实现页面控件拖动效果js代码

    ;(function($) { var DragPanelId = "divContext"; var _idiffx = 0; var _idiffy = 0; var _Div ...

  8. 基于jquery实现页面loading加载效果

    实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...

  9. jQuery控制页面滚动条上下滚动

    .向上滚动  $(); .向下滚动   $(); 参数解读:$(this)表示要实现上下滚动的对象,-50表示向上滚动50px , +50表示向下滚动50px ,1000表示滚动速度

随机推荐

  1. noip模拟赛 whzzt-Conscience

    分析:数据中并不存在无解的情况...... 每个摄像头都要覆盖尽可能多的点,按照y从小到大排序.对于每一列,只用判断第一个没有被观测到的就可以了,这个点必须要放摄像头,因为除了它自己没有其它的摄像头能 ...

  2. 进入DRF和ANGULAR的整合学习，这三篇入门内容一定要学好的

    看来,DJANGO的模板功能是无法用啦, 学着用ANGLUAR的SERVICE,MODULE,CONTROLLER啦... http://engineroom.trackmaven.com/blog/ ...

  3. 洛谷—— P1657 选书

    https://www.luogu.org/problem/show?pid=1657 题目描述 学校放寒假时,信息学奥赛辅导老师有1,2,3……x本书,要分给参加培训的x个人,每人只能选一本书,但是 ...

  4. xtrabackup 恢复单表步骤

    1.apply-log应用redo日志,并导出表的数据字典innobackupex --apply-log --export  备份集 2.建表 如果知道表结构,则重建删除的表 create tabl ...

  5. - > 贪心基础入门讲解二——活动安排问题

    有若干个活动,第i个开始时间和结束时间是[Si,fi),只有一个教室,活动之间不能交叠,求最多安排多少个活动? 分析: 我们就是想提高教室地利用率,尽可能多地安排活动.考虑容易想到的几种贪心策略: ( ...

  6. OCX 打包 CAB 与 JS 调用具体教程

        近期在做一个 WEB 项目.须要调用 OCX 进行连接读卡器读卡.本来并不想用 OCX 技术.由于 ActiveX 技术是微软出品.这样就导致整个系统仅仅能使用 IE 浏览器(其它浏览器能够通 ...

  7. 打造atom成为golang开发神器

    在我在Windows系统上开发的日子里.我使用IDE开发数年之久.比如Visual Basic IDE, Borland Delphi IDE, Visual C++ 和最后的Visual Studi ...

  8. Ubuntu 16.04 安装CodeBlocks

    首先将软件源添加进来,就是运行以下命令 sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update 完 ...

  9. ubuntu安装go语言

    1.下载安装包 2.解压 sudo tar -zvxf go1.10.linux-amd64.tar.gz -C /usr/local 3.配置 sudo vim /etc/profile 添加 #s ...

  10. PCB genesis方槽加内角槽孔实现方法

    一.为什么方槽孔加内角孔 如下图,客户来的方槽或Slot槽有内角尺寸要求,通常直接钻一个Slot槽孔内角是不能满足客户要求的,这时我们做CAM的需采用小钻刀进行处理.加内角孔或内角槽的方式进行处理了. ...