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

随机推荐

ssh登录问题
ssh username@ip 密码正确但是登陆ssh时permission denied 1. 启动sshd:/etc/init.d/ssh start 2. 在/etc/ssh/sshd_ ...
hdu 2089 记忆化搜索写法（数位dp）
/* 记忆化搜索,第二维判断是否是6 */ #include<stdio.h> #include<string.h> #define N 9 int dp[N][2],digi ...
Neo4j ETL工具快速上手：简化从关系数据库到图数据库的数据迁移
注:本文系从https://medium.com/neo4j/tap-into-hidden-connections-translating-your-relational-data-to-graph ...
NOIP2014 提高组合集
NOIP 2014 提高组合集 D1 T1 生活大爆炸版石头剪刀布首先,先将两个人的猜拳序列都变得不小于n.然后逐个模拟.胜败什么的看表就行了. #include <iostream> ...
MySQL: 让MySQL支持颜文字emoji
数据库需要支持utf8mb4,如果已经创建了,那么可以用如下命令转换: alter database xxxx character set utf8mb4 collate utf8mb4_unicod ...
.NET 复制A对象值到B对象
1.最基础的ModelCopy using System; using System.Collections.Generic; using System.ComponentModel; public ...
openGl学习之基本图元
从本篇開始,会给出一些代码实例,所以要配置好编译环境. 环境配置: vs2012下配置链接http://www.cnblogs.com/dreampursuer/archive/2014/05/27/ ...
Setup Script in SoapUI - 停止项目运行 (abort project)
TestSuite需要依赖一个先决条件(比如Login) 当Login失败则立即停止Project运行在Project的Setup Script的代码如下 import com.eviware.so ...
在Java中实现UDP协议编程（DatagramSocket/DatagramPacket）
1.什么是UDP协议? UDP( User Datagram Protocol )协议是用户数据报,在网络中它与TCP协议一样用于处理数据包.在OSI模型中,在第四层——传输层,处于IP协议的上一层. ...
硬盘-RAID 5组建
没发正文之前本人先声明一下----本文是转载这篇文章简直是太精彩了,呵呵 ,实在是忍不住了,一定要贴出来,让大家分享! 原作者:唐华责任编辑:xiexiaojin 我们生活在一个历史记录在硬盘上的 ...

jQuery实现页面锚点滚动效果

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

随机推荐

热门专题