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表示滚动速度

随机推荐

noip模拟赛轰炸
题目描述 C国和W国爆发了战争!YJC决定对W国的n个城市进行轰炸.每个城市都有一个重要度ai.设xi=‘重要度大于ai的城市数+1’,那么编号为i城市就是第xi个被轰炸的城市.显然这样能保证重要度大 ...
HDU5266 LCA 树链剖分LCA 线段树
HDU5266 LCA Description 给一棵 n 个点的树,Q 个询问 [L,R] : 求点 L , 点 L+1 , 点 L+2 -- 点 R 的 LCA. Input 多组数据. The ...
my first emacs custom key binding
(defun comment-this-level () (interactive) (move-beginning-of-line 1) (set-mark-command nil) (fo ...
Ubuntu 16.04安装Chrome浏览器
一.先有一个hosts能访问Google 参考:http://www.cnblogs.com/EasonJim/p/5999060.html 二.安装方法有两种,如下所示: 1.下载deb包(推荐) ...
Swift版音乐播放器（简化版）
这几天闲着也是闲着,学习一下Swift的.于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神. 希望对大家有帮助! 这个DEMO里.使用到了 AudioPlayer(对音 ...
LeetCode 237. Delete Node in a Linked List （在链表中删除一个点）
Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...
一个MySQL-JDBC驱动bug引起的血案……
问题背景公司是做电商系统的,整个系统搭建在华为云上.系统设计的时候,考虑到后续的用户和订单数量比较大,需要使用一些大数据库的组件.关系型数据库这块,考虑到后续数据量的快速增长,不是直接写入MySQL ...
ORA-00904："T1"."AREA_ID" :标识符无效
1.错误描写叙述 ORA-00904:"T1"."AREA_ID" :标识符无效 00904 . 00000 - "%s:invalid identi ...
shell 切割文件
[root@hadoop2 xiaole_chk_url]# cat looh.index.splitfile.sh loop_c=0loop_step=10001loop_tag=0str_head ...
MySQL运行计划初探
-Mysql运行计划总结– 1 运行计划概述先看看一个运行计划 mysql> explain SELECT * FROM EMP , DAO_OBJECTS t1 , DAO_OBJECTS ...

jQuery实现页面锚点滚动效果

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

随机推荐

热门专题