当流动条过长时,如何办呢?今年很流行这种,“返回顶部”的样式。
几个关键属性:
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>
分享到:
相关推荐
JAVA下载远程文件到本地的最精简代码,就一行代码,不信自己看,而且是官方提供,绝对适合你,一个远程URL,一个本地路径,文件就在你的电脑上了
MFC 选择文件夹 精简代码 MFC 选择文件夹 精简代码 MFC 选择文件夹 精简代码
xv6是一个比linux精简的OS,我在源代码,添加了一些注释,可以作为学习资料.
python 实现Kmeans的算法,包括数据实例,代码等,下载可以直接使用。
官方的代码一点注释都么有,并且比较复杂,此处是精简版,并且添加了基本注释,一般流程还是能看的较清晰的,由于个人能力有限,也没查到官方数据,所以某些方法具体是做什么的我是更具功能大致猜的。 另,每个下载...
很好的俄罗斯方块算法,经过精简,另外有比较详细的注释,很详细,能直接运行
安卓开发通过注解精简代码,使用基类的完美封装
jsp版FCKEditor最精简版配置工程代码 jsp版FCKEditor最精简版配置工程代码 jsp版FCKEditor最精简版配置工程代码 jsp版FCKEditor最精简版配置工程代码 jsp版FCKEditor最精简版配置工程代码 jsp版FCKEditor最精简版...
将待清理的 C++源代码 存为纯文本形式“test.txt”,将文本文件copy到CommentCleaner.exe同一个文件夹内,运行 CommentCleaner.exe程序将会在本目录下生成一个“testout.txt”文件,也就是没有注释的源代码。...
Yolov5 最简推理代码,精简版models文件夹,使用方式见https://blog.csdn.net/suiyingy/article/details/123920843。只需要推理部分代码,删除冗余部分。
基于linux0.11的最精简系统的代码,一万行左右
SSH框架整合之注册登录,精简代码,详细注释,附带数据库
asp.net及其他语言邮件邮箱发送代码精简加注释让你一看就会,真的好用
Maven下SpringMVC+MyBatis最精简的例子,比较简单,注释详细
通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化。一般有两种方案:即优化代码或更改设计方法。我们一般会选择后者,因为不去调用...而一个设计良好的程序能够精简代码,从而提高性能。
精简博客-精简博客系统-精简博客系统源码-精简博客管理系统-精简博客管理系统java代码-精简博客系统设计与实现-基于springboot的精简博客系统-基于Web的精简博客系统设计与实现-精简博客网站-精简博客网站代码-精简...
精简博客系统代码 java精简博客系统代码 基于springboot的精简博客系统代码 1、精简博客系统的技术栈、环境、工具、软件: ① 系统环境:Windows/Mac ② 开发语言:Java ③ 框架:SpringBoot ④ 架构:B/S、MVC ⑤ ...