HTML页面回到顶部

CSS, HTML / 2021年7月4日 / hamster

示例如下：

<style>
    .top{
        display: block;
        width: 120px;
        height: 120px;
        background: #ffffff;
        color: #333333;
        font-size: 64px;
        line-height: 120px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #cccccc;
        position: fixed;
        right: 20px;
        bottom: 20px;

    }
</style>
<script>
    $(function () {
        //测试语句循环
        for (var i=100; i > 0; i--)
        {
            $(".test").append("<p>这是一条循环语句</p>");
        }
        //滚动监听
        $(window).scroll(function () {
            var windowtop = $(window).scrollTop();
            if(windowtop > 0){
                $(".top").show();
            }else{
                $(".top").hide();
            }

        });
        //置顶
        $(".top").click(function () {
            $('html,body').animate({scrollTop:'0'});
        });

    })

</script>
<body>
<div class="test"></div>
<a class="top">up</a>
</body>

,

头像

hamster

网站开发及商务可加Q934511830联系