基于JQuery完成,样式使用的bootstrap。

html代码

 

<div class="go-top"> 
    <button class="btn btn-primary">
        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true">
    </button> 
</div>

css代码

.go-top {
    display: none;
    z-index: 999999;
    position: fixed;
    bottom: 130px;
    left: 80%;
    margin-left: 40px;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

js代码

$(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 1000) {
            $('div.go-top').show();
        }
        else {
            $('div.go-top').hide();
        }
    });
    $('div.go-top').click(function() {
        $('html, body').animate({scrollTop: 0}, 1000);
    });
});
最后修改日期: 2018年12月6日

作者

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。