返回网页顶部方法

一.锚链接

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. _itoa _itow _itot atoi atof atol

    函数原型: char *_itoa( int value, char *string, int radix ); //ANSI wchar_t * _itow( int value, wchar_t ...

  2. python 打印的异常回溯和代码不对应

    正在运行的程序没有停止 又重新install了导致site-packages里的代码改变 正在运行的是老代码, 当出现异常时打印的行数是老代码,但显示的行的内容时新代码

  3. MySql存储过程批量删除多个数据库中同名表中的指定字段

    1. 创建存储过程batchDeleteField:删除所有名称为"MyDB_"开头的数据库中的指定字段 -- ---------------------------- -- Pr ...

  4. Pandas绘图不支持中文解决方案

    参考博客:https://blog.csdn.net/weixin_42057852/article/details/80840215

  5. 请问Pycharm如何实现变量的批量重命名？

    1.点击你要改的单词,右键refactor ->rename 2. Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换

  6. 获取MMSQL数据库表信息

    SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号=a.colorder, 字段名=a.n ...

  7. bzoj 4373 算术天才⑨与等差数列——线段树+set

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4373 能形成公差为k的等差数列的条件:mx-mn=k*(r-l) && 差分 ...

  8. UVA10905 Children's Game

    题意:给定n个正整数,把它们连接成一个最大的整数.比如,123,124,556,90有24种连接方法,最大的结果为9 056 124 123. 贪心.一开始就想用string水过.注意不能直接用str ...

  9. TZ_13_Hystix的熔断器

    1.作用:当服务繁忙时,如果服务出现异常,不是粗暴的直接报错,而是返回一个友好的提示,虽然拒绝了用户的访问,但是会返回一个结果. 熔断器的三种状态: Closed:关闭状态(断路器关闭),所有请求都正 ...

  10. tr的display属性出现td的colspan无效问题

    http://www.aichengxu.com/other/9262680.htm 今天在做项目的时候发现用javascript控制 tr 的显示隐藏时,当把tr的显示由“display:none” ...