html页面滚动到一定位置显示回到顶部按钮

最新推荐文章于 2022-07-05 19:37:52 发布

原创最新推荐文章于 2022-07-05 19:37:52 发布 · 1w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#回到顶部 #scroll-top #back-to-top

html+css+js+框架专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个实用的返回顶部按钮的实现方法，包括HTML结构、CSS样式及jQuery脚本，当页面滚动到一定位置时，按钮将自动显示并伴随动画效果。

回到顶部按钮在很多页面中都会用到，具体实现效果如下：

当页面滚动到一定位置时，页面右下侧出现固定按钮：
在这里插入图片描述
当鼠标移到按钮上方时，有一定的动画效果：

<div class="t-right-bar">
	<div class="t-bar-support" data-open-online-form><a href="index.php?a=support&c=html">技术支持</a></div>
	<div class="t-bar-rocket" id="back-to-top">返回顶部</div>
</div>

.t-right-bar {
    position: fixed;
    right: 0;
    bottom: 10%;
    width: 48px;
    height: 48px;
    z-index: 1000;
    cursor: pointer;
}

.t-right-bar > div {
    float: left;
    height: 36px;
    margin-bottom: 1px;
    border-radius: 20px 0 0 20px;
    color: #fff;
    padding-left: 100%;
    clear: both;
    white-space: nowrap;
    font-size: 13px;
    line-height: 36px;
    font-style: normal;
    background-color: #aaa;
    background-repeat: no-repeat;
    background-position: 12px center;
    transition: transform .2s cubic-bezier(.215, .61, .355, 1), padding .2s cubic-bezier(.215, .61, .355, 1), margin .2s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.215, .61, .355, 1)
}

 .t-right-bar > div.active, .t-right-bar > div:hover {
    transform: translateX(-100%);
    padding-left: 45px;
    padding-right: 10px;
    margin-left: 48px;
    background-color: #23a0e1;
    text-decoration: none;
    color: #fff
}

.t-right-bar .t-bar-support {
    background-image: url(../img/icon/support_1.svg);   //按钮图标
    background-position: 14px center;
}

.t-right-bar .t-bar-rocket {
    background-image: url(../img/icon/rocket_1.svg);  //按钮图标
    background-position: 19px center;
}

.t-bar-support a{
    color: white;
}

.t-bar-support a:hover{
    color: #fff
}

    $(".t-right-bar").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $(".t-right-bar").fadeIn(500);
            }
            else {
                $(".t-right-bar").fadeOut(500);
            }
        });

        $("#back-to-top").click(function () {
            $('body,html').animate({scrollTop: 0}, 100);
            return false;
        });
    });