一个简易的html“返回顶部”页面部件

参考的廖雪峰的实现方法:https://www.liaoxuefeng.com/article/0013738939371174a66d9fcf5094b1dbf28e9e9ccbf9d61000

当网页页面过长时,查看内容多有不便,因此大多数的网页都实现了一个“返回顶部”的功能按钮。

以下使用的是html+css+js实现的“返回顶部”功能。

步骤

1.在html页面中嵌入“返回顶部”的部件

<div class="go-top">
    <div class="arrow"></div>
    <div class="stick"></div>
</div>

2.css中定义该部件的形态

.go-top {
    display: none;
    opacity: 0.6;
    z-index: 999999;
    position: fixed;
    bottom: 40px;
    left: 92%;
    margin-left: 40px;
    border: 1px solid #a38a54;
    width: 50px;
    height: 50px;
    background-color: #bfc092;
    border-radius: 25px;
    cursor: pointer;
}
.go-top:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.go-top div.arrow {
    position: absolute;
    left: 15px;
    top: 3px;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: #0066cc;
}

.go-top div.stick {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 8px;
    height: 14px;
    display: block;
    background-color: #0066cc;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}

设置left:92%控制部件在整个页面靠右位置。

设置border-radius为width(height)的一半,让部件呈现为圆形。

3.js控制部件的show与hide

$(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 600)
            $('div.go-top').show();
        else
            $('div.go-top').hide();
    });
    $('div.go-top').click(function() {
        $('html, body').animate({scrollTop: 0}, 1000);
    });
}); 

当页面浏览到600px之后,跳出“返回顶部”部件。
并且设置点击之后1000ms返回顶部。

效果
参见本页面右方。