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

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

实现原理：

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. 使用flask框架实现web页面与数据库数据互联+常见的几种状态码

    1.通过cygwin从pip install两个包:PyMySQL.SQLAlchemy: 2.在app.py中import我们要用到的库中的包:create_engine,text :from sq ...

  2. j教你如何用erlang-tuple

    元组是用来保存一组数据元素的复合数据类型,其中数据元素是要求为erlang的数据类型,单不一定要是相同的类型,元组使用封闭的花括号{}来定义,里面的元素有逗号隔开. 例如: 1> {1,2,3} ...

  3. libnids-1.24 使用源码问题

    从网上下载libnids-1.24源码包,解压后./configure安装. 会出现提示 checking for GLIB... configure: error: Package requirem ...

  4. Introduction of filter in servlet

    官方给出的Filter的定义是在请求一个资源或者从一个资源返回信息的时候执行过滤操作的插件.我们使用过滤起最多的场景估计就是在请求和返回时候的字符集转换,或者权限控制,比如一个用户没有登录不能请求某些 ...

  5. codeforces 804A Find Amir 思维/水题

    A few years ago Sajjad left his school and register to another one due to security reasons. Now he w ...

  6. 数组排序自定义comparator()

    案例1:现在有一个普通数组arr = [3,1,2,4,5,6,8,0,1]; 自定义一个排序方法: function createComparator(){ return function (obj ...

  7. 定时重启tomcat

    写个简单的定时重启,弄了一上午,主要是crontab里面奇怪 #!/bin/bash p=`ps -ef |grep tomcat |head -n 1|awk -F" " '{p ...

  8. C# 流总结

    前言 本篇文章简单总结了在C#编程中经常会用到的一些流.比如说FileStream.MemoryStream. BufferedStream. NetWorkStream. StreamReader/ ...

  9. [转]vs2010用 boost.python 编译c++类库 供python调用

    转自:http://blog.csdn.net/wyljz/article/details/6307952 VS2010建立一个空的DLL 项目属性中配置如下 链接器里的附加库目录加入,python/ ...

  10. Azure VMSS (3) 修改VM Template并创建VMSS

    <Windows Azure Platform 系列文章目录> 在开始本章内容之前,我们需要准备好Azure VM的镜像,具体可以参考:Azure VMSS (2) 对VM执行Genera ...