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

随机推荐

codeforces 371D
#include<stdio.h> #define N 210000 struct node { int x,next; __int64 count,vec; }pre[N]; int n ...
P3372 【模板】线段树 1 洛谷
https://www.luogu.org/problem/show?pid=3372 题目描述如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 ...
vue2源码浏览分析01
1.构造函数 Vue$3 function Vue$3 (options) { if ("development" !== 'production' && !(t ...
java中POJO类和DTO类都要实现序列化
java中POJO类和DTO类都要实现序列化 java中POJO类和DTO类都要实现序列化 java中POJO类和DTO类都要实现序列化序列化:序列化是将对象转换为容易传输的格式的过程.例如,可以序 ...
Node.js 博客实例（三）添加文件上传功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库使用 For ...
C#之选择排序
算法描述 1.假定未排序序列中第一位为数组最小值,通过与后面的数值进行比较,找到未排序序列中最小值,与未排序序列第一位交换位置: 2.重复步骤一,对剩余未排序序列进行比较找出最小值,与未排序序列中第一 ...
Java读取数据库数据生成柱状图
此案例是用swing显示数据的.须要引入jfreechart相关包.不同版本号可能包不同样.本人用的是此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class ...
URAL 1326. Bottle Taps(简单的状压dp)
题目不太好读懂,就是先给你一个n代表要从n个物品中买东西,然后告诉你这n个东西的单位价格,在给你m个集合的情况.就是每一个结合中有x件物品.他们合起来买的价格是k.这x件物品依次是:p1--px.之后 ...
CoffeeScript里的字符串插值
拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...
初识bigdata时的一些技能小贴士
既然小豆腐如此给力,而且充分的利用主动学习的优势,已经有了迅速脑补,压倒式的优势,不过这只是表面而已,一切才刚刚开始,究竟鹿死谁手,还有待验证. 以上可以看到,小豆腐为什么拼命的要teach我们了么, ...

jQuery实现页面锚点滚动效果

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

随机推荐

热门专题