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

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

实现原理：

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. 全栈爬取-Scrapy框架(CrawlSpider)

    引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法 ...

  2. Linux命令学习之路——内容剪切:cut

    使用者:所有角色 用法:cut [ -bcdfn ] [ --complement ] filename 作用:截取文件中的部分字段用于展示或存储到新文件中 应用场景: 1.内容展示 : 截取一个或多 ...

  3. s21day11 python笔记

    s21day11 python笔记 一.函数小高级 函数名可以当作变量来使用 #示例一: def func(): print(123) func_list = [func, func, func] # ...

  4. 绑定属性 - v-bind

    未绑定 <!DOCTYPE html><html><head>    <meta charset="utf-8">    <t ...

  5. Arch Linux 的休眠设置

    https://wiki.archlinux.org/index.php/Power_management/Suspend_and_hibernate_(简体中文)https://wiki.archl ...

  6. vue2中使用mint-ui,性别选择

    安装需要的组件 import { DatetimePicker,Toast,Popup,Picker } from 'mint-ui'; templete部分 <div class=" ...

  7. stylelint 安装配置

    1.安装 stylelint: npm i stylelint -g npm i stylelint stylelint-config-standard --save-dev 2.在 scripts ...

  8. PS 给照片换背景

    1. 打开一张照片,导入证件照 2. 点击选择 => 选择并遮住 (快捷键 command + option + r) 3. 点击快速选择工具,将属性设置里面的视图模式选择为洋葱皮,鼠标点击需要 ...

  9. (C#)中的DataSet、string、DataTable等对象转换成Json

    ConvertJson.cs类 using System; using System.Collections.Generic; using System.Text; using System.Data ...

  10. maya中的顶点平滑算法(vertex smooth algorithm)

    继上文继续写.有了顶点迭代器之后就可以利用MItMeshVertex类的getConnectedVertices方法来获取相连点并代入平滑算法. 选择什么样的平滑算法呢?本人比较懒,直接打开了计算机图 ...