html返回顶部效果

最新推荐文章于 2023-11-12 19:12:34 发布

小白盐

最新推荐文章于 2023-11-12 19:12:34 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： js

本文链接：https://blog.youkuaiyun.com/yooellie/article/details/79384712

html 专栏收录该内容

2 篇文章

订阅专栏

css

.backToTop {
    display: none;
    background-color: #000;
    font-size: 12px;
    position: fixed;
    right: 10px;
    bottom: 100px;
    cursor: pointer;
    height: 38px;
    width: 38px;
    display: block;
    background: #2f4050;
    padding: 9px 8px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    opacity: .5;
}

(function() {
    var $backToTopTxt = "返回顶部",
        $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, 120);
        });
})();