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 ...
随机推荐
- FCC JS基础算法题(3):Find the Longest Word in a String (找出最长单词)
题目描述: 在句子中找出最长的单词,并返回它的长度.函数的返回值应该是一个数字. 基本思路,将字符串转换成数组,然后得出数组中单个元素的长度,对长度进行排序,返回最大的一个 代码: function ...
- 3.5 unittest生成测试报告HTMLTestRunner
3.5 unittest生成测试报告HTMLTestRunner 前言批量执行完用例后,生成的测试报告是文本形式的,不够直观,为了更好的展示测试报告,最好是生成HTML格式的.unittest里面是不 ...
- Centos上SSH连接过慢原因
最近发现机房里有些centos机器进行ssh登陆非常慢且会超时,经过查看发现时GSPI认证过慢问题造成: 使用 ssh -v 发现 debug1: SSH2_MSG_SERVICE_ACCEPT re ...
- day01计算机基础
今日内容 1.计算机初步认识 1.计算机认识 1. 计算机基础 1.1硬件:cpu/内存/硬盘/主板/网卡 1.2操作系统 linux:免费开源 windows mac 1.3解释器/编译器 补充:编 ...
- “轻量级JavaEE”之新学期目标
我以后的职业目标是做一名Java开发工程师.之前学了一些JAVA的基础知识,也学了一些C,但以现在的知识储备和实战能力是不能胜任企业开发实战的要求的,所以这门“轻量级JavaEE企业应用实战”对我的提 ...
- 2018.4.24 快排查找第K大
import java.util.Arrays; /* 核心思想:利用快排思想,先假定从大到小排序,找枢纽,枢纽会把大小分开它的两边,当枢纽下标等于k时, 即分了k位在它左边或右边,也就是最大或最小的 ...
- （32）forms组件（渲染自建规则：局部钩子函数和全局钩子函数）
要达成渲染自建规则 1.局部钩子函数(某个字段,自定意义规则,不如不能以sb开头,数据库已存在等) 2.全局钩子函数(校验两次密码是否一致) 3.使用css样式 register.html <! ...
- maven整合ssh框架笔记
具体工程会上传文件sshpro <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:x ...
- Google - chanceToLose24Game
/* 一个类似24点的游戏,假设牌桌上有无数张1-10的牌,然后你手上的牌的总和是k,现在你可以随机到牌桌上抽牌加到总和里,如果你手上牌的总和在20-25之间就是win,如果总和超过25就是lose, ...
- PythonStudy——如何使输出不换行
python 3.x版本打印不换行格式如下: print(x, end="") # end="" 可使输出不换行.双引号之间的内容就是结束的内容, # 可以是空 ...