返回网页顶部方法

一.锚链接

simpleDemo:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         #father{

             width: 400px;

             height: 5000px;

             border:1px solid #000;

         }

         #son{

             width: 600px;

             height: 5000px;

             background: linear-gradient(45deg ,red,yellow,green,cyan,blue);

         }

     </style>

 </head>

 <body>

 <div id="top">我是可爱的顶部</div>

     <div id="father">

         <div id="son"></div>

     </div>

 <a href="#top">返回顶部</a>

 </body>

 </html>

 <script>

 </script>

二.JS实现返回顶部

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         #father{

             width: 400px;

             height: 5000px;

             border:1px solid #000;

         }

         #son{

             width: 600px;

             height: 5000px;

             background: linear-gradient(45deg ,red,yellow,green,cyan,blue);

         }

     </style>

     <script>

         window.onload = function () {

             var toTop = document.getElementById('toTop');

             toTop.onclick = function () {

                 // window要通过函数scrollTo(x,y) 设置滚动到文档中某个坐标

                 window.scrollTo(0,0);

                 console.log(window);

             }

         }

     </script>

 </head>

 <body>

 <div id="top">我是可爱的顶部</div>

     <div id="father">

         <div id="son"></div>

     </div>

 <a href="javascript:;" id="toTop">返回顶部</a>

 <!--行内式-->

 <!--<a href="javascript:window.scrollTo(0,0);" id="toTop">返回顶部</a>-->

 </body>

 </html>

三.行内式返回顶部

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         #father{

             width: 400px;

             height: 5000px;

             border:1px solid #000;

         }

         #son{

             width: 600px;

             height: 5000px;

             background: linear-gradient(45deg ,red,yellow,green,cyan,blue);

         }

     </style>

     <script>

       /**

        * 平常项目中不推荐使用行内式写法添加事件

        *

        * 由于返回顶部功能是简单唯一的，所以写到行内式反而比较方便

        * */

     </script>

 </head>

 <body>

 <div id="top">我是迷人的顶部</div>

     <div id="father">

         <div id="son"></div>

     </div>

 <!--行内式-->

 <a href="javascript:window.scrollTo(0,0);" id="toTop">返回顶部</a>

 </body>

 </html>

四.内嵌式返回顶部

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .box{

             height: 2000px;

             width: 100px;

             background: deeppink;

         }

     </style>

 </head>

 <body>

     <div class="box">我是可恶的顶部</div>

     <!--方法一-->

     <a onclick="fn()" href="javascript:;" id="btn">按钮</a>

     <!--方法二-->

     <!--<a href="javascript:;" id="btn">按钮</a>-->

 </body>

 </html>

 <!--外联式-->

 <!--<script src="animate.js"></script>-->

 <script>

     /*下面是内嵌式*/

     // 方法一

    function fn() {

        // window要通过函数scrollTo(x,y) 设置意思是：滚动到文档中的某个坐标。

        window.scrollTo(0,0);

    }

    // 方法二，普通js返回顶部

 //    var btn = document.getElementById("btn");

 //    btn.onclick = fn;

 </script>

五.外联式返回顶部。

waiLianTest.js

 /*外联式返回顶部测试*/

 function fn() {

     // window要通过函数scrollTo(x,y) 设置意思是：滚动到文档中的某个坐标。

     window.scrollTo(0,0);

 }
 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .box{

             height: 2000px;

             width: 100px;

             background: deeppink;

         }

     </style>

 </head>

 <body>

     <div class="box">我是可恶的顶部</div>

     <a onclick="fn()" href="javascript:;" id="btn">按钮</a>

 </body>

 </html>

 <!--外联式-->

 <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. day72作业

    目录 models模型类 路由配置 视图配置 序列化组件配置 基于ModelSerializer类,完成Car资源的单查,群查,单增接口 序列化:显示车名,车的颜色,车的价格,车的海报,车的品牌 反序 ...

  2. 线段树区间更新+区间求和模板（数组实现）洛谷p3372，p3373

    模板题目1:https://www.luogu.org/problemnew/show/P3372 懒惰标记讲解:https://www.cnblogs.com/wushengyang/p/11194 ...

  3. js之简单工厂模式

    简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...

  4. php 5.4 windows2003 iis 安装 注意

    php5.3 以上 不再支持ISAPI模式 只能用 FastCGI ....

  5. Ubuntu下使用sshfs挂载远程目录到本地

    访问局域网中其他Ubuntu机器,在不同机器间跳来跳去,很是麻烦,如果能够把远程目录映射到本地无疑会大大方面使用,就像Windows下的网络映射盘一样.在Linux的世界无疑也会有这种机制和方式,最近 ...

  6. Django项目：CRM(客户关系管理系统)--25--17PerfectCRM实现King_admin单列排序

    登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html {#table_data_list.html#} {## ————————08PerfectCR ...

  7. BootStrap框架选择

    1. mentronic4.0 效果非常好,但是商业版收费 下面是一个.net的系统,基于mentronic4.0开发,感觉不错 http://www.cnblogs.com/guozili/p/34 ...

  8. 读书笔记--Head First 设计模式 目录

    1.设计模式入门 2.观察者模式 3.装饰者模式 4.工厂模式 5.单件模式 6.命令模式 7.适配器模式与外观模式 8.模板方法模式 9.迭代器与组合模式 10.状态模式 11.代理模式 12.复合 ...

  9. 关于 matplotlib

    注意,需要 zlib, 需要 Tkinter pip install matplotlib import numpy as np import matplotlib.pyplot as plt plt ...

  10. nslookup查不到数据

    ch查不到数据 换一个ip就可以了,什么原理?