JS实现快速回到头部的方法

最新推荐文章于 2022-01-19 10:45:55 发布

weixin_34128411

最新推荐文章于 2022-01-19 10:45:55 发布

阅读量794

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3720860/blog/1582077

本文提供了一段实现网页滚动到顶部功能的代码，并针对IE等不同浏览器进行了兼容性优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<html>

   <head>
       <meta charset="UTF-8">
       <title>实现回到顶部</title>
   </head>
   <style>
       body {
           margin: 0;
           padding: 0
       }

       #to_top {
           width: 30px;
           height: 40px;
           padding: 20px;
           font: 14px/20px arial;
           text-align: center;
           background: #06c;
           position: absolute;
           cursor: pointer;
           color: #fff
       }
   </style>
   <script>
       window.onload = function() {
           var oTop = document.getElementById("to_top");
           var screenw = document.documentElement.clientWidth || document.body.clientWidth;
           var screenh = document.documentElement.clientHeight || document.body.clientHeight;
           oTop.style.left = screenw - oTop.offsetWidth + "px";
           oTop.style.top = screenh - oTop.offsetHeight + "px";
           window.onscroll = function() {
               var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
               oTop.style.top = screenh - oTop.offsetHeight + scrolltop + "px";
           }
           oTop.onclick = function() {
               document.documentElement.scrollTop = document.body.scrollTop = 0;
           }
       }
   </script>

   <body style="height:1000px;">
       HELLO WORLD
       <div id="to_top">返回顶部</div>
   </body>

</html>

20180507更新，发现上面的这一串代码不兼容IE，经修改，以下代码在IE8测试可行。

<!DOCTYPE html>
<html>
<head>
<title>兼容IE，chrome 等所有浏览器回到顶部代码</title>
   <meta charset="UTF-8">

</head>
<body>
   <div style="width: 980px; height: 1024px;">HELLO WORLD</div>
   <p id="to_top" style="border: 1px red solid;" onclick="goTopEx()">
       返回頂部
   </p>
   <SCRIPT type=text/javascript>
// JavaScript Document
function goTopEx(){
var obj=document.getElementById("to_top");
alert(obj)
obj.onclick=function(){
document.documentElement.scrollTop=1;
document.body.scrollTop=1;
}
return;
}
</SCRIPT>
</body>
</html>