返回顶部

JavaScript实现

很多前台展示页面,都有一个返回顶部功能,实际上这个实现起来非常简单。

document.documentElement.scrollTop=0

JQuery实现

这个用纯JavaScript实现,动画不太方便实现,效果比较生硬,但使用JQuery或是其它动画库就十分轻松了,这里以Jquery作为例子。

$("body,html").animate({
        scrollTop: 0
    }, 800);

上面代码中,我们使用JQuery设置一个scrollTop该变的动画即可实现返回顶部。

JQuery组件

因为这个功能经常使用,我们可以把它封装成JQuery组件使用。

backtop.js

(function ($) {
    $.fn.showBacktop = function () {
        var backtop = $('<div title="返回顶部" class="backtop-btn"><i class="fas fa-rocket"></i></div>');
        backtop.click(function () {
            $("html, body").animate({ scrollTop: 0 }, 100);
        });
        $('body').append(backtop);
    }
}(jQuery));

backtop.css

.backtop-btn {
    color: rgba(125, 125, 125, 0.6);
    border-radius: 999px;
    width: 5rem;
    height: 5rem;
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    text-align: center;
    font-size: 3rem;
    transform: rotate(-45deg);

    transition: color 0.5s;
}
.backtop-btn:hover {
    color: rgba(125, 125, 125, 1);
}

使用该组件:

$.fn.showBacktop();
作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap