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 ...
随机推荐
- Power BI和 Visio 集成优缺点
Power BI 的 Visio 自定义视觉,这个功能是非常值得让人兴奋的,小悦相信这是一个非常重要的开发,不仅适用于 Visio,也适用于Power BI.现在已经有越来越多的可视化,它们以更简洁的 ...
- flask自定义处理错误方法
自定义错误处理方法: 当客户端访问浏览器是,得到相对应的状态码,服务器通过状态码给用户相对应的页面. @app.errorhandler(404) def handle_404_error(err): ...
- spring jpa 动态查询（Specification）
//dao层 继承 扩展仓库接口JpaSpecificationExecutor (JPA 2引入了一个标准的API)public interface CreditsEventDao extends ...
- Linq中的左连，右连，内连
1.左连接: var LeftJoin = from emp in ListOfEmployeesjoin dept in ListOfDepartmenton emp.DeptID equals d ...
- 3.python集合
1.集合1.不同元素组成2.无序排列的可hash值3.集合中元素必须是不可变类型(数字,字符串,元祖) 2.集合创建:(1)定义可变类型集合set:把里面元素一个一个进行for循环往大括号里放 set ...
- NOIP2012 Day1 T2国王游戏 洛谷P1080
第一篇博客啊…… 由于我太弱了,还要去补不全的知识点准备参加人生第一次NOIp,所以第一篇博客就简短一点好了(偷懒就直说吧……) 洛谷P1080传送门 题意概括: 有N对数ai和bi,以及两个数a0和 ...
- activiti学习第二天
今天我们来发布一个流程,然后查看数据库中都发生了什么变化. 下面我们使用activiti designer设计一个流程.如图 流程很简单,我们先简单后增加难度. 创建流程图的顺序,新建一个文件夹(di ...
- Kali安装虚拟机遇到的问题
1.上官网下载了最新版的VMware 14.0版,安装的时候下一步下一步就是了. 2.最新版的官网激活码 FF590-2DX83-M81LZ-XDM7E-MKUT4 CG54H-D8D0H-H8DHY ...
- 1，python 的基本数据类型
Python3 中有6个标准的数据类型:Number(数字);字符串(String);列表(list);元组(Tuple);字典:(Dict);集合(Sets) Number: 数字 int整形 fl ...
- 【python接口自动化-requests库】【一】requests库安装
1.概念 requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量的工作,完全满 ...