前台特效（2）回到顶部

---恢复内容开始---

原生js(有兼容性问题):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- 脚本 -->
<script>
window.onload=function(){
var one = document.getElementById("one")
window.onscroll=function(){


if (document.documentElement.scrollTop>=document.documentElement.clientHeight*0.3)
{
one.style.display="block"
one.style.position="fixed"
one.style.top="90%"
one.style.left="90%"
}
if (document.documentElement.scrollTop<document.documentElement.clientHeight*0.3)
{
one.style.display="none"
one.style.position=""}
}


one.onclick=function(){

var a1a = setInterval(yd,60)

function yd (){
document.documentElement.scrollTop-=100;
if (document.documentElement.scrollTop==0)
{
clearInterval(a1a)
}
}

if (document.addEventListener)
{document.addEventListener("DOMMouseScroll",scrollfun,false);
}
window.onmousewheel=document.onmousewheel=scrollfun

function scrollfun(e){
var ev = e||window.event
if (ev.wheelDelta==-120||ev.detail==3)
{
clearInterval(a1a)
}
}


}
}
</script>
</head>

<body>
<input type="button" id="one" value="回到顶部" style="display:none"/>
<div style="height:10000px">
</div>
</body>
</html>

-------------------------------------------华丽的分割线-------------------------------------------

jquery方法：

<!DOCTYPE html>
<html>
    <head>
        <title>回到顶部</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
        <script>
            $(function(){
                $off = true
                $(window).scroll(function(){
                    if($(window).scrollTop()>500){
                        if($off){
                            $("<div/>").attr("id","ReturnTop").css({width:"50px",height:"50px",backgroundImage:"url(./ReturnTop.png)",position:"fixed",bottom:"100px",right:"20px",display:"none"}).appendTo("body").fadeIn().click(function(){
                                $(window).scrollTop(0);
                                $(this).fadeOut();
                            });
                            $off = false;
                        }else{
                            $("#ReturnTop").fadeIn();
                        }
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id="one" style="height: 10000px;width:100px;border:solid 1px red;">TODO write content</div>
    </body>
</html>

 

图片：ReturnTop.png

这样写的好处：不用额外的书写css，便于添加与部署

posted @ 2013-03-07 23:20  我叫龙弟弟  阅读(205)  评论(0)  编辑  收藏  举报