返回网页顶部方法

一.锚链接

simpleDemo:

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  
  7.      <style>
  8.          *{
  9.              margin: 0;
  10.              padding: 0;
  11.          }
  12.          #father{
  13.              width: 400px;
  14.              height: 5000px;
  15.              border:1px solid #000;
  16.          }
  17.          #son{
  18.              width: 600px;
  19.              height: 5000px;
  20.              background: linear-gradient(45deg ,red,yellow,green,cyan,blue);
  21.          }
  22.      </style>
  23.  </head>
  24.  <body>
  25.  
  26.  <div id="top">我是可爱的顶部</div>
  27.      <div id="father">
  28.          <div id="son"></div>
  29.      </div>
  30.  <a href="#top">返回顶部</a>
  31.  </body>
  32.  </html>
  33.  <script>
  34.  
  35.  </script>

二.JS实现返回顶部

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  
  7.      <style>
  8.          *{
  9.              margin: 0;
  10.              padding: 0;
  11.          }
  12.          #father{
  13.              width: 400px;
  14.              height: 5000px;
  15.              border:1px solid #000;
  16.          }
  17.          #son{
  18.              width: 600px;
  19.              height: 5000px;
  20.              background: linear-gradient(45deg ,red,yellow,green,cyan,blue);
  21.          }
  22.  
  23.      </style>
  24.      <script>
  25.          window.onload = function () {
  26.              var toTop = document.getElementById('toTop');
  27.              toTop.onclick = function () {
  28.                  // window要通过函数scrollTo(x,y) 设置滚动到文档中某个坐标
  29.                  window.scrollTo(0,0);
  30.                  console.log(window);
  31.              }
  32.          }
  33.      </script>
  34.  </head>
  35.  <body>
  36.  <div id="top">我是可爱的顶部</div>
  37.      <div id="father">
  38.          <div id="son"></div>
  39.      </div>
  40.  <a href="javascript:;" id="toTop">返回顶部</a>
  41.  <!--行内式-->
  42.  <!--<a href="javascript:window.scrollTo(0,0);" id="toTop">返回顶部</a>-->
  43.  </body>
  44.  </html>

三.行内式返回顶部

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  
  7.      <style>
  8.          *{
  9.              margin: 0;
  10.              padding: 0;
  11.          }
  12.          #father{
  13.              width: 400px;
  14.              height: 5000px;
  15.              border:1px solid #000;
  16.          }
  17.          #son{
  18.              width: 600px;
  19.              height: 5000px;
  20.              background: linear-gradient(45deg ,red,yellow,green,cyan,blue);
  21.          }
  22.  
  23.      </style>
  24.      <script>
  25.        /**
  26.         * 平常项目中不推荐使用行内式写法添加事件
  27.         *
  28.         * 由于返回顶部功能是简单唯一的，所以写到行内式反而比较方便
  29.         * */
  30.      </script>
  31.  </head>
  32.  <body>
  33.  <div id="top">我是迷人的顶部</div>
  34.      <div id="father">
  35.          <div id="son"></div>
  36.      </div>
  37.  <!--行内式-->
  38.  <a href="javascript:window.scrollTo(0,0);" id="toTop">返回顶部</a>
  39.  </body>
  40.  </html>

四.内嵌式返回顶部

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .box{
  8.              height: 2000px;
  9.              width: 100px;
  10.              background: deeppink;
  11.          }
  12.      </style>
  13.  </head>
  14.  <body>
  15.      <div class="box">我是可恶的顶部</div>
  16.      <!--方法一-->
  17.      <a onclick="fn()" href="javascript:;" id="btn">按钮</a>
  18.      <!--方法二-->
  19.      <!--<a href="javascript:;" id="btn">按钮</a>-->
  20.  </body>
  21.  </html>
  22.  <!--外联式-->
  23.  <!--<script src="animate.js"></script>-->
  24.  <script>
  25.  
  26.      /*下面是内嵌式*/
  27.      // 方法一
  28.     function fn() {
  29.         // window要通过函数scrollTo(x,y) 设置意思是：滚动到文档中的某个坐标。
  30.         window.scrollTo(0,0);
  31.     }
  32.     // 方法二，普通js返回顶部
  33.  //    var btn = document.getElementById("btn");
  34.  //    btn.onclick = fn;
  35.  
  36.  </script>

五.外联式返回顶部。

waiLianTest.js

  1.  /*外联式返回顶部测试*/
  2.  function fn() {
  3.      // window要通过函数scrollTo(x,y) 设置意思是：滚动到文档中的某个坐标。
  4.      window.scrollTo(0,0);
  5.  }
  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          .box{
  8.              height: 2000px;
  9.              width: 100px;
  10.              background: deeppink;
  11.          }
  12.      </style>
  13.  </head>
  14.  <body>
  15.      <div class="box">我是可恶的顶部</div>
  16.      <a onclick="fn()" href="javascript:;" id="btn">按钮</a>
  17.  
  18.  </body>
  19.  </html>
  20.  <!--外联式-->
  21.  <script src="waiLianTest.js"></script>

JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式的更多相关文章

  1. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  2. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  3. 写一个JavaScript“返回顶部”功能

    在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...

  4. javascript返回顶部插件+源码

    javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...

  5. JavaScript获取css 行间样式，内连样式和外链样式的方式

    [行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv ...

  6. Javascript返回顶部

    控制按钮下拉到达一定距离时显示,返回顶层时消失,用JS中的延时定时器来模拟滚动条效果 <script type="text/javascript"> window.on ...

  7. javascript 返回顶部

    <style> #linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; ...

  8. [JavaScript] 表单验证不通过不提交的JS写法

    主要是本世纪初的写法.<script> function validateForm(f) { if (f.name.value == "") { alert(" ...

  9. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Android开发 Camera2开发_1_拍照功能开发

    介绍 google已经在Android5.1之后取消了对Camera1的更新,转而提供了功能更加强大的Camera2.虽然新版本依然可以使用Camera1但是,不管是各种机型适配还是拍照参数自定义都是 ...

  2. 网络流Sap算法

    GDKOi就快要开始了.没时间打解析,直接上模板. #include <cstdio> #include <cstring> #include <algorithm> ...

  3. mysql查看执行计划重构后的查询

    MYSQL优化器会对客服端发送的SQL语句进行优化,优化后的SQL语句再被MYSQL执行.然后我们在优化SQL的时候,怎么获取到MYSQL优化后执行语句呢. EXPLAIN select * from ...

  4. Extjs 疑难杂症 （LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏）

    一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...

  5. jsp中 url传参到后台的参数获取

    datagrid传值url方法1:<input type="hidden" id="sortid"> <table id="dg&q ...

  6. 009-python一些问题整理

    1. Python中的 // 与 / 的区别 " / "  表示浮点数除法,返回浮点结果 >>> 90/30 3.0 " // " 表示整数除 ...

  7. 《数据结构与算法分析——C语言描述》ADT实现(NO.01) : 栈(Stack)

    这次的数据结构是一种特殊的线性表:栈(Stack) 栈的特点是后入先出(LIFO),可见的只有栈顶的一个元素. 栈在程序中的地位非常重要,其中最重要的应用就是函数的调用.每次函数调用时都会创建该函数的 ...

  8. 高斯消元和高斯约旦消元 Gauss（-Jordan） Elimination

    高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵. 在讲算法前先介绍些概念 矩阵的初等变换 矩阵的初等变换又分为矩阵的初等行变换和矩阵的初等列变换 ...

  9. 洛谷P5319 奥术神杖

    题意:给你若干个串和一个填了一部分的串.补完这个串使得 (每个串的匹配次数 * 权值) ^ (1 / 所有串匹配次数) 最大. 解:把这个东西随便取一个对数,就变成了分数规划. 二分.然后在AC自动机 ...

  10. HDU6187 Destroy Walls

        把这道题放了很久才来更新blog,似乎越来越懒了啊. 我们发现他给的城堡的坐标非常有趣啊,都是无理数. 对于其他所有点的坐标都是有理数的情况下,一个坐标为无理数的点绝对特别. 特别之处就是:经 ...