jQuery 点击回到顶部

最终效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>回到顶部</title>
<style>
 body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,code,form,input,textarea,p,th,td,fieldset,legend,figure{
margin:0;
padding:0;
}
body{
	font-family:"微软雅黑",Arial;
}
ul,ol{
	list-style:none;
}
a{
	text-decoration:none;
}
img{
	border:0;
}
div{
    font-size: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid grey;
    position: fixed;
    right: 0;
    bottom: 20%;
    text-align: center;
    line-height: 50px;
    display: none;
    cursor: pointer;
}
ul{
    width: 100%;
    height:500px; 
}
</style>
<body>
    <div class="box">^</div>
    
    <ul style="background:red"></ul>
    <ul style="background:yellow"></ul>
    <ul style="background:blue"></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        $(window).scroll(function(){   
            if ($(window).scrollTop()>100){ 
                $(".box").fadeIn(700); 
            }
            else                           
            {
                $(".box").fadeOut(700); 
            }
        });
        
        $(".box").click(function(){   
            $('body,html').animate({ 
                scrollTop:0 
            },700);
            return false; //防止冒泡
        });
    });
</script>
jQuery 点击回到顶部

最终效果

猜你喜欢
