网站返回顶部

最新推荐文章于 2023-11-12 19:12:34 发布

Lily_feng

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量202

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Lily_feng/article/details/107062632

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网站返回顶部

当我们浏览某个网站，网站内容很多，浏览到一半不想浏览了，这时我们想返回头部，那我们该怎么做呢。其实，我们在做网站时要考虑到用户，要方便用户，要让用户有浏览下去的想法，从而增加用户浏览量，进而增加网站的用户点击量，是不是讲得很有道理。话不多说上代码
html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
</head>
<body style="height:3000px;background: pink;">
<h1>返回顶部</h1>
<div id="to_top">返回顶部</div>
</body>
</html>

css样式：

  *{
            margin:0;
            padding:0;
        }
        #to_top{
            width:30px;
            height:40px;
            padding:20px;
            /*前面的14px是表示字体大小，后面的24px是表示行高*/
            font:14px/20px arial;
            text-align:center;
            background:#06c;
            position:absolute;
            cursor:pointer;
            color:#fff;
        }

js部分：

<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>

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #to_top{
            width:30px;
            height:40px;
            padding:20px;
            /*前面的14px是表示字体大小，后面的24px是表示行高*/
            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>
</head>
<body style="height:3000px;background: pink;">
<h1>返回顶部</h1>
<div id="to_top">返回顶部</div>
</body>
</html>

页面运行效果：
在这里插入图片描述

Lily_feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站返回顶部

网站返回顶部当我们浏览某个网站，网站内容很多，浏览到一半不想浏览了，这时我们想返回头部，那我们该怎么做呢。其实，我们在做网站时要考虑到用户，要方便用户，要让用户有浏览下去的想法，从而增加用户浏览量，进而增加网站的用户点击量，是不是讲得很有道理。话不多说上代码html代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>无标题文档</title&g
复制链接

扫一扫

专栏目录