返回顶部,最精简代码，带注释

java-mans

浏览: 11630062 次

最近访客更多访客>>

morelily

devcang

serisboy

chjinniu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15567)

社区版块

存档分类

2012-08 ( 1467)
2012-07 ( 1872)
2012-06 ( 1125)
更多存档...

当流动条过长时，如何办呢？今年很流行这种，“返回顶部”的样式。

几个关键属性：

opacity：1. 不透明 2. 不传导 3. 暧昧;难懂，css中表示不透明度，他非常喜好与filter结合着使用。

'Alpha'属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说:就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。

window.onscroll 注意ie6的bug,很让人恶心的。

scrollTop:读取操作。具体来说就是，在拖动滚动条的过程中，会读取此时的scrollTop

好了，明白了这些。来看看代码吧。

<html>  
  <head>  
    <style type="text/css">
    #toTop{width:54px;height:54px;display:block;position:fixed;right:25px;bottom:45px;background-position:-700px -110px;opacity:0.3;filter:alpha(opacity=30);}
    #toTop:hover{opacity:1;filter:alpha(opacity=100);}

    #toTop{background-image:url(http://mat1.gtimg.com/www/images/qq2012/qqbg_1.5.2.png); background-repeat:no-repeat;}

    </style>

<!--[if lte IE 6]>
<style type="text/css">
html,body{overflow-x:hidden;}

#toTop{position:absolute;right:15px;bottom:45px;}

</style>
<![endif]-->

<script type="text/javascript">
function toTopHide(){
  document.documentElement.scrollTop+document.body.scrollTop>400?document.getElementById("toTop").style.display="block":document.getElementById("toTop").style.display="none";
}
window.onscroll=toTopHide;
</script>


    <title>返回顶部</title>  
     <p>this is the top</p> 
 
    <?php
for($i=0;$i<93;$i++){

  echo "<br>";
}

    ?>
    <p>this is the bottom</p>
    <a href="javascript:void(0);" target="_self" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false" style="display: block; "></a>
  </body>  
</html>

分享到：