css 单击底部返回头部

CSS 是一种用来控制网页样式和布局的技术，也可以用来增加一些交互效果，如单击底部返回头部。

一般情况下，我们可以使用 JS 编写一些代码来实现这种效果，但是在某些情况下，使用 CSS 也可以达到同样的效果。

要实现单击底部返回头部的效果，我们可以使用 CSS 的 position 属性和 transform 属性。

    /* 创建一个 fixed 定位的按钮 */     .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
            opacity: 0;
            cursor: pointer;
            transform: translateY(50%);
            transition: opacity .3s;
    }
    /* 鼠标悬停时改变按钮透明度 */    .back-to-top:hover {
            opacity: .5;
    }
    /* 当页面滚动到一定位置时，按钮渐入 */    .back-to-top.show {
            opacity: 1;
    }
    /* 平滑滚动到页面顶部 */    .back-to-top:active {
            transition: none;
            transform: translateY(30%);
    }
    /* 为了方便起见，我们可以创建一个 helper 类 */    .helper {
            height: 1200px;
            background-color: #f5f5f5;
    }
    

在上面的代码中，我们创建了一个 class 为 back-to-top 的 fixed 定位的按钮，并使用 transform 属性将其向上移动 50%。通过 opacity 属性，我们将其初始透明度设置为 0，当鼠标悬停时将其透明度设置为 0.5。我们还设置了一个过渡效果，使其在显示或隐藏时平滑过渡，而不是瞬间出现或消失。

为了使按钮在页面滚动到一定位置时显示出来，我们还需要使用 JS 代码，监听页面滚动事件，当页面滚动到一定位置时，为按钮添加一个 class 为 show，以显示出来。

    var backToTopBtn = document.querySelector('.back-to-top');
    window.addEventListener('scroll', function() {
            if (window.scrollY >
 200) {
     // 当页面滚动到超过 200px 时，显示按钮            backToTopBtn.classList.add('show');
        }
 else {
                backToTopBtn.classList.remove('show');
        }
    }
    );
    

最后，为了测试我们的效果，我们可以添加一个 helper 类，用来填充页面内容，以便我们能够进行测试。

现在，你可以尝试在自己的网站中添加这个效果，并提高用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！