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 ...
随机推荐
- 获取当前时间并格式化，CTime类
CTime类,此类应该不是C++标准类库,属于windows封装的关于时间的类库,使用环境应该为 Win32程序,MFC程序,VC++程序 CTime tm = CTime::GetCurrentTi ...
- linux重启查看日志及历史记录 查询原因
linux重启查看日志及历史记录 查询原因 linux系统文件通常在/var/log中下面是对下面常出现的文件进行解释 /var/log/message ----------------------- ...
- Oracle创建表空间报错：O/S-Error: (OS 3) 系统找不到指定的路径
创建sql: CREATE TABLESPACE TBSP_1 DATAFILE 'E:/oracle/product/10.2.0/tablespaces/weblogic.dbf' ...
- php查询快递的类
<?php/** * Express.class.php 快递查询类 * * @copyright widuu * @license ...
- Python全栈之路----进制运算
1.进制拾遗 二进制:01 八进制:01234567 十进制:0123456789 十六进制:0123456789ABCDEF (a是10,b是11,c是12,d是13,e是14,f是15) 2.进 ...
- （32）forms组件（渲染自建规则：局部钩子函数和全局钩子函数）
要达成渲染自建规则 1.局部钩子函数(某个字段,自定意义规则,不如不能以sb开头,数据库已存在等) 2.全局钩子函数(校验两次密码是否一致) 3.使用css样式 register.html <! ...
- 同一台电脑中同时安装oracle database 服务器端和oracle client 客户端时注意
如果在一台电脑中同时安装oracle的客户端和服务器端软件, 一定要先安装oracle database 服务端,并进行相应的配置 listener.ORA. 然后再去安装oracle client ...
- 文件内容比较difflib
#!/usr/bin/env python#-*- coding:utf-8 -*-import difflibimport sys,osos.chdir('E:\\PythonWrok')a = o ...
- java 实现自定义事件
import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; i ...
- PythonStudy——字典 Dictionary
# 容器(集合):存放多个值的变量# 单列容器(系统中的单列容器很多):list | tuple# 双列容器(map):只有dict,存放数据 成对出现,dict存放数据采用 key-value键值对 ...