如图中右下角所示红色背景白色箭头按钮。

jQuery代码:

需要先引入：jquery及jquery easing库。如不想使用jquery easing库，请将下面代码中的easeOutExpo换成swing。

function bkt() {
    if ($(window).scrollTop() > 1800) { //屏幕滚动1800px以上是显示按钮
        if ($(".bkt").hasClass("show")) {
            window.clearTimeout(this.bkttimer);
            this.bkttimer = window.setTimeout(function () {
                $(".bkt").removeClass("show");
            }, 3000); // 3秒钟内页面没有滚动行为隐藏按钮
        }
        if (!$(".bkt").hasClass("show")) {
            $(".bkt").addClass("show");
        }
    } else {
        if ($(".bkt").hasClass("show")) {
            $(".bkt").removeClass("show");
        }
    }
    $(".bkt").on("click", function () {
        $("html,body").stop().animate({ scrollTop: 0 }, 900, 'easeOutExpo'); // 回到顶部的滚动时间0.9秒
    });
}

jQuery代码执行：

$(function () {
    bkt();
});
$(window).on("scroll", function () {
    bkt();
});

CSS代码：

.bkt { width: 50px; height: 50px; border-radius: 100%; padding: 5px; overflow: hidden; position: fixed; z-index: 400; right: 20px; bottom: 60px; opacity: 0; -webkit-transition: 1.6s; -o-transition: 1.6s; transition: 1.6s; -webkit-transform: translateX(71px); -ms-transform: translateX(71px); transform: translateX(71px); }
@media (max-width: 500px) { .bkt { right: 10px; bottom: 70px; } }
.bkt svg { width: 100%; height: 100%; display: block; background-color: #f9644e; border-radius: 100%; overflow: hidden; top: 0; left: 0; padding: 10px; }
.bkt svg path { fill: #ffffff; }
.bkt.show { opacity: 1; -webkit-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
.bkt:hover { cursor: pointer; }

HTML代码

一般放置在最后，body关闭标签前面。

<div class="bkt">
    <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M997.604 677.888l-431.56-431.56c-0.91-1.023-1.934-2.047-2.844-3.071-28.444-28.445-74.41-28.445-102.855 0L26.396 677.092c-28.444 28.444-28.444 74.41 0 102.855s74.411 28.444 102.856 0l382.293-382.294 383.09 383.09c28.444 28.445 74.41 28.445 102.855 0s28.444-74.41 0.114-102.855z"
            ></path>
    </svg>
</div>