a标签锚链接到顶部加过度效果css

巨蟹座守护骑士

已于 2023-12-22 17:58:09 修改

阅读量430

点赞数

分类专栏： js 文章标签： css html 前端

于 2023-04-11 12:50:27 首次发布

本文链接：https://blog.csdn.net/weixin_70563937/article/details/130081077

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.创建锚链接

<!-- 锚链接返回顶部 -->
<div class="totop">
    <img src="/static/images/header/totop.png" alt="图标" width="20px">
    <a href="#app">
        返回顶部
    </a>
</div>

2.样式

.totop {
    display: none;
}

.totopshow {
    cursor: pointer;
    padding: 10px;
    display: block;
    width: 48px;
    height: 81px;
    z-index: 100;
    position: fixed;
    bottom: 50px;
    right: 12px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    background-color: #4e6ef2;
    border-radius: 3px;
}

.totop a {
    display: block;
    color: #fff;
    padding-top: 5px;
}
/* 滚动过度 */
html {
    scroll-behavior: smooth;
}

3.js控制按钮显示隐藏

// 显示到顶部按钮
    $(window).scroll(function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 900) {
            $(".totop").addClass("totopshow")
        } else {
            $(".totop").removeClass("totopshow")
        }
    })