首页 > 代码库 > 回到顶部

回到顶部

2024-09-16 09:03:38   221人阅读

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
            font-size: 14px;
            -webkit-user-select:none ;
        }
        html,body{
            width: 100%;
            height: 500%;
            background: #11c900;
            background: -webkit-linear-gradient(top,#11c900,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lawngreen,lightpink,lightsalmon,lightseagreen);
        }
        a{
            text-decoration: none;
            color: #000;
        }
        a:hover,a:active,a:target,a:visited{
            text-decoration: none;
            color: #000;
        }
        #goLink{
            position:fixed;
            bottom: 150px;
            right: 50px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: red;
            opacity: 0.2;
            filter: alpha(opacity=20);

            border-radius: 50%;
        }
        #goLink:hover{
            opacity: 1;
            filter: alpha(opacity=100);
        }
        #target{
            margin: 1000px;

        }
    </style>
</head>
<body>
<!--
      A标签本身是跳转页面的，把跳转的地址写在href这个属性中
      1)不写值的话是刷新本页面
      2)写的如果是#target,是锚点定位，定位到当前页面ID为target这个位置
      3)""javascript:;这样写是取消A标签的默认跳转的行为
-->
   <!--<a href="http://www.mamicode.com/#target" id="goLink">GO</a>
   <div id="target"></div>-->
    <a href="javascript:;" id="goLink">GO</a>
     <script type="text/javascript">
         var goLink = document.getElementById("goLink");
         goLink.onclick = function(){
             document.documentElement.scrollTop = 0;
             document.body.scrollTop = 0;
         }
     </script>
</body>
</html>

 

回到顶部


联系
我们