jQuery+html实现回到顶部箭头

利用a标签点击跳转到第一页的特性，我们可以写出一个返回到第一页的一个小箭头，并且通过css更改小箭头的样式

<div id="jiantou">
            <a href="">
                <p class="ah">^</p>
            </a>
        </div>

#jiantou {
    position: fixed;
    z-index: 9;
    width: 50px;
    height: 50px;
    /*background-color: #DAB866;*/
    top: 500px;
    left: 1400px;
}

#jiantou>a {
    text-decoration: none;
}

.ah {
    width: 60px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background: #cccccc;
    color: white;
    font-size: 36px;
}


.ah:hover {
    filter: alpha(Opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

 

然后这个箭头在第一页的时候是不显示的，当到达第二页的时候才应该显示出来，所以我们在这里就用到了jQuery来获取滚动条高度

 $(".ah").hide()
        $(window).scroll(function() {

            if ($(document).scrollTop() > 500) {
                $(".ah").show()
            } else {
                $(".ah").hide(500)
            }
        })

 

当达到top值500px的时候，到达第二页，箭头显现

否则箭头隐藏