回到顶部小demo

来源：互联网发布：剑三大师捏脸数据编辑：程序博客网时间：2024/05/18 03:08

一：查询知识点

这两个知识点以前就看过，又忘了，所以要多用啊~~
box-shadow:1px 1px 1px 1px red;依次为：水平阴影的位置垂直阴影的位置模糊距离阴影的尺寸阴影的颜色
text-shadow:1px 1px 1px red;依次为：水平阴影的位置垂直阴影的位置模糊距离阴影的颜色

二：代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>回到顶部</title>        <style>            body,p,div{margin:0;padding:0;}            #top{                position:fixed;                bottom:40px;                right:55px;                border:1px solid red;                height:55px;                padding:10px 5px 10px;                text-align: center;                border-radius: 3px;                color:#6f7aa5;                cursor:pointer;            }            #top:hover{                box-shadow: 0 0 5px 1px red;                text-shadow:0 0 1px #4af1ca;            }            #top p{                margin-bottom: 10px;            }            .main{                width:80%;                margin:0 auto;                white-space: pre-wrap;            }        </style>    </head>    <body>        <div class="main">            I'm jzx.Who you are?----------Top.            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?            I'm jzx.Who you are?        </div>        <div id="top">            <p>back</p>            <p>top</p>        </div>        <script type="text/javascript">            window.onload = function(){                var top = document.getElementById('top');                top.onclick = function(){                    var scrollTop = document.body.scrollTop;                    if(scrollTop == 0){                        return ;                    }else{                        document.body.scrollTop = 0;                    };                };            };        </script>    </body></html>

有好的建议请在评论中指出。

阅读全文

0 0