经常在网页中看到有这样的现象，点击一个按钮，然后页面会跳到页面的中指定的位置，那这种效果是怎么实现的呢?

很多网页都有这种效果：返回顶部或者跳到不同的楼层（以下是天猫的效果）

实现原理：

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 返回浏览器顶部的更多相关文章

  1. jquery返回滚动条顶部

    var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...

  2. jquery返回页面顶部

    1.此博文图片样式引用腾讯网站,效果如下: 2.样式设置: #toTop { /*选中的背景图片的大小*/ width: 54px; height: 54px; display: none;/*刚开始 ...

  3. jquery,返回到顶部按钮

    HTML: <footer> <a href="#" class="top">↑</a> </footer> C ...

  4. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  5. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  6. 代码： 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  7. Jquery 返回json数据在IE浏览器中提示下载的问题

    Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当 ...

  8. Jquery DIV滚动至浏览器顶部位置固定

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...

  9. Jquery DIV滚动至浏览器顶部后固定不动代码

    $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".win").offset().top; //滚动条事件 $(window).scr ...

随机推荐

  1. makefile简单学习

    前言 在C语言中,我们需要将源代码生成可执行的程序.这里面其实要经过非常多的步骤.参看下图: 这中间主要通过make命令,读取一种名为“makefile”或“Makefile”的文件来实现软件的自动化 ...

  2. cut语法2

    linux每日一命令--cut--按文件大小排序 显示前100行 显示后五列 ll -Sh|head -n 100|cut -d ' ' -f 5- 一.基本语法cut是一个选取命令,以行为单位,用指 ...

  3. idea设置代码提示不区分大小写

    idea设置代码提示不区分大小写 intellij idea默认下的代码提示是区分大小写的,例如类方法名过长.类的名字过长等,完全通过手打的话较为繁琐,这里简单的设置下即可. 把 Case sensi ...

  4. 1--Postman使用token进行批量测试

    1. 先执行登陆接口,查看返回token是再响应头还是再响应体 有的返回再响应头中,有的再响应体中 2.设置环境变量token,并从登陆接口获取token赋值给环江变量 第一步:创建环境变量,值为空即 ...

  5. emmet简单记录

    一.引式符号 html:5 or  ! . class #  id []标签内属性 pycharm不支持  {}标签的内容 pycharm不支持 ()分组标签  pycharm不支持 二.关系符号 1 ...

  6. spring-task解决定时问题

    *  spring3以上版本,spring-content自带 spring-task ,来解决工程中的定时问题  基于注解配置spring定时任务 spring配置文件如下: <?xml ve ...

  7. Python全栈之路----Python基础元素

    1.变量定义规则                 声明变量   name = " Alex Li"     其中,name是变量名(标识符),"Alex Li" ...

  8. 20155219付颖卓《网络对抗》逆向及Bof基础

    实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...

  9. e充电加密破解

    def encrypt(self,stationId ): keys = 'F29E0E39-98E4-F4CC318443' encrypt_obj = pyDes.triple_des(keys, ...

  10. Linux设备驱动模型之platform(平台)总线详解

    /********************************************************/ 内核版本:2.6.35.7 运行平台:三星s5pv210 /*********** ...