导航返回顶部HTML+JS

爱吃烧鸭蛋的叶安

于 2024-12-10 10:58:43 发布

阅读量176

点赞数 2

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

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/144368306

版权

js 专栏收录该内容

5 篇文章

订阅专栏

在这里插入图片描述

场景：初始化默认不展示该按钮，当页面滑动超300px之后展现出按钮，点击返回顶部的效果
html

<div class="back_to_top">顶</div>

css

.back_to_top{
    position: fixed;
    right: 10px;
    bottom: 10%;
    transform: translateY(50%);
    z-index: 9;
    background-color: #F7F9FA;
    box-shadow: -2px 0 5px 2px rgba(97, 105, 119, 0.18);
    border-radius: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}

// 返回顶部
    let backToTopBtn = document.querySelector('.back_to_top');
    backToTopBtn.style.display = 'none';
    window.addEventListener('scroll', () => {
        if (window.scrollY > 300 || document.documentElement.scrollTop > 300) {
            backToTopBtn.style.display = 'block';
        } else {
            backToTopBtn.style.display = 'none';
        }
    });
    backToTopBtn.addEventListener('click', (e) => {
        e.preventDefault();

        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });