点击滚动到顶部

最新推荐文章于 2023-09-28 10:46:09 发布

jiangfeng666

最新推荐文章于 2023-09-28 10:46:09 发布

阅读量344

点赞数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条控制（点击滚动到顶部）</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
.top{
    width:50px;
    height:50px;
    background:#666;
    color:#FFF;
    font-size:35px;
    line-height:50px;
    text-align:center;
    display:block;
    text-decoration:none;
    position:fixed;
    right:20px;
    bottom:20px;
    }
.top:hover{
    background:#090;
    }
</style>
</head>

<body>
<a href="javascript:;" class="top">∧</a>
<script>
    for(var i=0;i<100;i++){
        document.write("<h1>"+i+"<h1>")
        }
    $(function(){
        $(".top").hide();
        $(window).scroll(function(){
            var t=$(this).scrollTop();
            if(t>200){
                $(".top").stop().fadeIn(50);
                }
            else{
                $(".top").stop().fadeOut(50);
                }
            })
        $(".top").click(function(){
            $("body,html").stop().animate({scrollTop:0},300);
            })
        })
</script>
</body>
</html>