当流动条过长时,如何办呢?今年很流行这种,“返回顶部”的样式。
几个关键属性:
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>