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

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

实现原理：

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. FCC JS基础算法题(0):Reverse a String(翻转字符串)

    题目描述: 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串.你的结果必须得是一个字符串. 算法: function reverseString(str) { ...

  2. DAX创建带有过滤器的超链接

    在这篇文章中,我们将创建一个DAX公式,根据报表中的过滤器生成超链接. 该度量包含2个部分,第一部分是使用DAX生成目标报告的正确URL,第二部分是将过滤器传递给该报告. 浏览器支持的MAX网址长度定 ...

  3. 【转载】 Pytorch 细节记录

    原文地址: https://www.cnblogs.com/king-lps/p/8570021.html ---------------------------------------------- ...

  4. switch和数组两种方法对不同输入做不同响应

    #include<stdio.h> int main(void) { int i; scanf("%d",&i); switch(i) { : printf(& ...

  5. python------Socket网略编程+动态导入模块

    上节课程回顾: 静态变量:与类无关,不能访问类里的任何属性和方法. 类方法:只能访问类变量. 属性:把一个方法变成静态属性, 反射: __new__:先于__init__执行: __call__: c ...

  6. angular引用echarts插件

    方法一 1. 命令行下载 npm install echarts --savenpm install ngx-echarts --save 2. angular.json 配置echarts路径. 2 ...

  7. 搭建简单的FTP服务器

    客户端部分主要使用C#提供的webclient类 (https://msdn.microsoft.com/library/system.net.webclient.aspx) 通过WebClient. ...

  8. IIS 集成模式 导致 AjaxPro 无法正常运行

    web.config 配置如下: system.web/httphandlers <httpHandlers> <add verb="POST,GET" path ...

  9. PythonStudy——数据类型转化 Data type conversion

    类型转换 1.数字类型:int() | bool() | float() 2.str与int:int('10') | int('-10') | int('0') | float('-.5') | fl ...

  10. Announcing the Operate Preview Release: Monitoring and Managing Cross-Microservice Workflows

    转自:https://zeebe.io/blog/2019/04/announcing-operate-visibility-and-problem-solving/   Written by Mik ...