实现平滑滚动的“返回顶部”按钮

你好呀，我是小邹。

在现代网页设计中，“返回顶部”按钮已经成为提升用户体验的一个重要元素，特别是对于那些内容较长的页面。当用户浏览到页面底部时，可以通过这个按钮快速返回到页面顶部。本文将介绍如何使用HTML、CSS和JavaScript来创建一个平滑滚动的“返回顶部”按钮，并且添加了一些额外的交互效果。

效果图

1722412199498

HTML 结构

首先，我们需要在HTML文档中定义按钮的位置。这里我们使用一个<button>标签，并为其设置类名.back-to-top，以便稍后在CSS中进行样式设置。

<!-- 向上箭头 -->
    <button class="back-to-top" id="scroll-to-top-btn" aria-label="回到顶部" tabindex="0">
        <svg viewBox="0 0 1024 1024">
            <path d="M0 512c0 282.624 229.376 512 512 512s512-229.376 512-512S794.624 0 512 0 0 229.376 0 512z"
                  fill="#1989FA"></path>
            <path d="M736.768 263.68H287.232c-12.288 0-23.04 10.752-23.04 23.04s10.752 23.04 23.04 23.04H737.28c12.288 0 23.04-10.752 23.04-23.04s-10.752-23.04-23.552-23.04m-207.872 105.472c-1.536-1.536-4.608-4.608-7.68-4.608-3.072-1.536-6.144-1.536-7.68-1.536-3.072 0-6.144 0-7.68 1.536-3.072 1.536-4.608 3.072-7.68 4.608l-186.368 186.368c-9.216 9.216-9.216 23.04 0 32.768 9.216 9.216 23.04 9.216 32.768 0l145.92-145.92V737.28c0 12.288 10.752 23.04 23.04 23.04s23.04-10.752 23.04-23.04V442.368l145.92 145.92c4.608 4.608 10.752 6.144 16.896 6.144 6.144 0 12.288-1.536 16.896-6.144 9.216-9.216 9.216-23.04 0-32.768l-187.392-186.368z"
                  fill="#FFFFFF"></path>
        </svg>
    </button>

这里我们还为按钮设置了tabindex属性，使得它可以通过键盘导航访问。同时使用了aria-label来增强可访问性，确保屏幕阅读器能够正确读取按钮的功能。

CSS 样式

接下来是CSS部分，我们将为按钮添加样式，包括位置、尺寸、颜色等。

.back-to-top {
    position: fixed; /* 固定位置 */
    bottom: 20px; /* 距离底部20像素 */
    right: 20px; /* 距离右侧20像素 */
    cursor: pointer; /* 鼠标悬停时显示手形指针 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    border-radius: 50%; /* 圆角 */
    background-color: #1989FA; /* 背景颜色 */
    color: white; /* 文字颜色 */
    text-align: center; /* 文本居中 */
    opacity: 0.8; /* 默认透明度 */
}

/* 鼠标悬停时的效果 */
.back-to-top:hover {
    opacity: 1; /* 提高透明度 */
}

/* 按钮获得焦点时的效果 */
.back-to-top:focus {
    outline: none; /* 移除默认轮廓线 */
}

/* SVG 图标的样式 */
.back-to-top svg {
    width: 30px; /* SVG 宽度 */
    height: 30px; /* SVG 高度 */
    transition: opacity 0.3s ease; /* SVG 图标淡入淡出效果 */
}

/* 添加工具提示 */
.back-to-top[aria-label]::before {
    content: attr(aria-label); /* 显示aria-label的内容 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 与按钮顶部对齐 */
    left: 0; /* 与按钮左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    background-color: transparent; /* 背景透明 */
    color: white; /* 文字颜色 */
    font-size: 12px; /* 字体大小 */
    opacity: 0; /* 默认不可见 */
    transition: opacity 0.3s ease; /* 淡入淡出效果 */
}

/* 当鼠标悬停时显示工具提示并隐藏SVG图标 */
.back-to-top:hover::before {
    opacity: 1; /* 显示工具提示 */
}

.back-to-top:hover svg {
    opacity: 0; /* 隐藏SVG图标 */
}

JavaScript 功能

最后，我们需要使用JavaScript来为按钮添加功能，使其在被点击时能平滑地滚动回页面顶部。

$(document).ready(function () {
    var scrollButton = $('#scroll-to-top-btn');
    // 当点击按钮时返回顶部
    scrollButton.click(function (e) {
        e.preventDefault(); // 阻止默认行为
        $('html, body').animate({scrollTop: 0}, 'slow'); // 平滑滚动到顶部
    });
});