jquery 返回浏览器顶部
经常在网页中看到有这样的现象，点击一个按钮，然后页面会跳到页面的中指定的位置，那这种效果是怎么实现的呢?
很多网页都有这种效果：返回顶部或者跳到不同的楼层（以下是天猫的效果）
实现原理：
1.我们来看，左侧导航条是固定不动的，那么这里使用的肯定是position中的固定属性，即position：fixed;
2.点击导航条之后，就会跳动到不同的楼层，那么我们点击的地方肯定会有关联着这个楼层
3.那怎么跳到这个楼层呢？我们转换一下思路，所谓的跳到某个楼层，实际上是整个网页的 scrollTop 为某个特殊的值，每次点击导航相同的楼层，总是跳到页面对应的楼层，所以，每次点击相同的导航条按钮时，相关联的scrollTop 总是 固定的
4.也就是收，当我们点击导航楼层时，即点击事件时，设定页面的scrollTop 就可以实现天猫的这个效果了
5. 另外：有一种效果，我们不必去获取某个楼层的scrollTop ,直接在楼层中设置一个唯一标识，当点击时，就自动跳到这个标识处，这样也可以实现，这就是a标签的锚点，所谓的唯一标识就是id属性
但是锚点方法有一个缺点，它没有动画效果，让人感觉不到它已经变化了
下面我们来试验一下：
锚点方法：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.contain {
padding: 20px 0;
position: relative;
width: 100%;
height: 100%;
} .contain div {
position: relative;
margin: 0 auto;
width: 1200px;
height: 430px;
border: 1px solid #ccc;
} .daohang {
position: fixed;
top: 145px;
left: 227px;
width: 50px;
height: 80px;
border: 1px solid blue;
} li {
width: 100%;
height: 20px;
}
</style>
</head> <body>
<div class="contain">
<div class="box1">
<span id="lou1">huanying2015:这是楼层111111111111111111</span>
</div>
<div class="box2">
<span id="lou2">huanying2015:这是楼层2222222222222222222</span>
</div>
<div class="box3 " style="height:1000px;">
<span id="lou3">huanying2015:这是楼层3333333333333333333</span>
</div>
<ul class="daohang">
<a href="#lou1" class="a">
<li>导航1</li>
</a>
<a href="#lou2" class="a">
<li>导航2</li>
</a>
<a href="#lou3" class="a">
<li>导航3</li>
</a>
</ul>
</div>
</body> </html>
运行结果：
2.另一个就是使用 jquery 或者js 来改变scrollTop 的值
加入js:
<script>
$(function() {
$("ul.daohang a").on("click", function() {
var index = $(this).index() + 1;
var Oscrolltarget = $("#lou" + index).offset().top;
$("html,body").animate({
"scrollTop": Oscrolltarget + 'px'
}, 300); });
});
</script>
html代码：先加入jquery,再将导航栏的a链接去掉，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<style>
.contain {
padding: 20px 0;
position: relative;
width: 100%;
height: 100%;
} .contain div {
position: relative;
margin: 0 auto;
width: 1200px;
height: 430px;
border: 1px solid #ccc;
} .daohang {
position: fixed;
top: 145px;
left: 227px;
width: 50px;
height: 80px;
border: 1px solid blue;
} li {
width: 100%;
height: 20px;
}
</style> </head> <body>
<div class="contain">
<div class="box1">
<span id="lou1">huanying2015:这是楼层111111111111111111</span>
</div>
<div class="box2">
<span id="lou2">huanying2015:这是楼层2222222222222222222</span>
</div>
<div class="box3 " style="height:1000px;">
<span id="lou3">huanying2015:这是楼层3333333333333333333</span>
</div>
<ul class="daohang">
<a href="javascript:;" class="a">
<li>导航1</li>
</a>
<a href="javascript:;" class="a">
<li>导航2</li>
</a>
<a href="javascript:;" class="a">
<li>导航3</li>
</a>
</ul>
</div>
</body> </html>
运行结果：
jquery 返回浏览器顶部的更多相关文章
- jquery返回滚动条顶部
var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...
- jquery返回页面顶部
1.此博文图片样式引用腾讯网站,效果如下: 2.样式设置: #toTop { /*选中的背景图片的大小*/ width: 54px; height: 54px; display: none;/*刚开始 ...
- jquery,返回到顶部按钮
HTML: <footer> <a href="#" class="top">↑</a> </footer> C ...
- jQuery返回顶部（精简版）
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- jquery返回顶部，支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- 代码： 返回页面顶部 jquery
jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...
- Jquery 返回json数据在IE浏览器中提示下载的问题
Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当 ...
- Jquery DIV滚动至浏览器顶部位置固定
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...
- Jquery DIV滚动至浏览器顶部后固定不动代码
$(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".win").offset().top; //滚动条事件 $(window).scr ...
随机推荐
- NotePad++配置使之支持jquery、html、css、javascript、php提示
1.将以下文件复制到Notepad++\plugins\apis覆盖之前的xml文件 javascript.xml html.xml css.xml 2.打开notepad++设置>首选项& ...
- Curl追踪请求延时问题
背景原因:测试环境发现一个连接内网访问和外网访问延迟差别很大,内网访问很快.外网访问很慢.于是我们用curl来诊断问题所在的区域! 命令如下: curl -o /dev/null -s -w %{ti ...
- 【oracle入门】数据完整性约束
数据的完整性约束是对数据描述的某种约束条件,关系型数据模型中可以有三类完整性约束:实体完整性.参照完整性和用户定义的完整性. 实体完整性Entity Integrity 一个基本关系通过对应显示世界的 ...
- IC卡_状态码SW1、SW2
9000 正常 成功执行 61xx 正常 需要发GET RESPONSE命令 6200 警告 信息未提供 6281 警告 回送数据可能出错 6282 警告 文件长度小于Le 6283 警告 选中的文件 ...
- Keil生成汇编文件、bin文件
// 生成汇编文件:$K\ARM\ARMCC\bin\fromelf.exe --text -a -c --output=@L_asm.txt "!L" // 生成bin文件:$K ...
- Linux下，用命令进行 日志分割、日志合并
指定文件大小分割: split -b 10m catalina.out imsoft 以每个文本文件10M方式分割日志 文件合并: cat small_file* > large_file
- Android开发中Activity状态的保存与恢复
当置于后台的Activity因内存紧张被系统自动回收的时候,再次启动它的话他会重新调用onCretae()从而丢失了之前置于后台前的状态. 这时候就要重写Activity的两个方法来保存和恢复状态,具 ...
- top命令详解---待完善
Top可以看到的cpu信息有: Tasks: 29 total, 1 running, 28 sleeping, 0 stopped, 0 zombie Cpu(s): 0.3% us, 1.0% s ...
- SQL-视图-004
什么是视图? 优点:视图是保存在数据库中的SELECT查询,可以简化查询操作,视图可以从多个表中提取数据,并以单个表的形式显示结果,这样就可以针对多个表的查询转化为对一个表的查询. 映射:视图可以理解 ...
- msm8909平台JEITA配置和bat-V therm表合入
8909平台的冷热充电温度点是硬件控制的,不能软件控制,目前硬件设置的是0~55度的充电区间. 软件上应该设置的是BTM comparator threshold, 70%(cold)~35%(hot ...