码迷,mamicode.com
首页 > 其他好文 > 详细

回到顶部

时间:2017-04-21 22:27:53      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:char   code   ntb   element   function   class   java   定位   跳转   

<!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="#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>

 

回到顶部

标签:char   code   ntb   element   function   class   java   定位   跳转   

原文地址:http://www.cnblogs.com/zzzzzzzsy/p/6746324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!