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

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

实现原理：

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. 团队项目（MVP------新能源无线充电管理网站）（总结）

    经过了几个月的学习时间与团队的磨合以及一系列的困难之后,我们mvp小组一起完成了这个项目,内心也是十分激动和有成就感的.其实一开始基础并不好,很多都不知道,但是通过在慕课网上的学习以及老师严厉地督促下 ...

  2. openFileDialog的使用

    这两天应用了一下openFileDialog,做的是上传的功能,在打开页面的时候进行的一系列操作虽说远远没有asp.net的上传控件好使,但是学习起来也是蛮还用的,下面是一个简单的应用 //点击浏览按 ...

  3. Window服务器 安装 Memcached

    官网上并未提供 Memcached 的Window平台安装包,我们可以使用以下链接来下载,你需要根据自己的系统平台及需要的版本号点击对应的链接下载即可: 32位系统 1.2.5版本:http://st ...

  4. Windows10 VS2017 C++信号处理

    #include "pch.h" #include <iostream> #include <csignal> #include <windows.h ...

  5. C#程序优化的50种方案

    一.用属性代替可访问的字段 1..NET数据绑定只支持数据绑定,使用属性可以获得数据绑定的好处: 2.在属性的get和set访问器重可使用lock添加多线程的支持. 二.readonly(运行时常量) ...

  6. day05 集合

    今日进度(数据类型) 集合 内存相关 深浅拷贝 1.集合表示 1.无序 2.不重复 3.hash查找 #问题:v={}表示? set: v1=set()#空集合 v1={1,2,3,4,5} dict ...

  7. angular6新建项目

    mkdir  angular6project cd angular6project ng new demo      新建一个普通项目 ng new demo --routing  新建一个带路由的项 ...

  8. QMD ST表 倍增

    #include<iostream> #include<cmath> using namespace std; ; int a[maxn]; ]; ]; int quick(i ...

  9. Vue-项目之免费课和购物车实现

    调整首页细节 固定头部 App.vue中代码 <style> body{ padding: 0; margin:0; margin-top: 80px; } </style> ...

  10. 安装包安装npm

    在阿里云机器上centos7安装npm可以直接yum安装,然后基于镜像的时候安装不了,直接使用安装包安装,记录一下: 官网下载地址:https://nodejs.org/en/download/ #! ...