您的位置：首页 > Web前端 > JQuery

jquery实现简单的回到顶部

2016-12-12 16:18 459 查看
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>

        .box1{

            width:35px;

            height:35px;

            background-color: #00b3ee;

            text-align: center;

            line-height: 35px;

            font-size: 36px;

            font-weight: bold;

            text-decoration: none;

            display: block;

            position: fixed;

            bottom:30px;

            right:30px;

            display: none;

        }

        .box1:hover{

            background-color: #00B83F;

        }

    </style>

</head>

<body>

<div style="background:#ff9900;height:100px;"></div>

<div style="background:#ccc;height:1200px;"></div>

<a href="javascript:(0);" class="box1">↑</a>

<script>

    $(function(){
$(window).scroll(function(){
var t = $(this).scrollTop();
if(t>100){
$(".box1").fadeIn();
}else{
$(".box1").fadeOut();
}
});
$(".box1").on("click",function(){
$("body,html").animate({scrollTop:0},300);
});

    })

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 回到顶部
相关文章推荐
新的分享
章节导航