JS实现回到页面顶部动画效果的简单实例

下面我将为你详细讲解“JS实现回到页面顶部动画效果的简单实例”的完整攻略。

步骤1：HTML结构

首先，在页面中需要添加一个回到顶部的按钮。在 HTML 中添加一个 button 元素，并为其添加一个 id 属性，以方便在 JS 中使用。

<button id="backToTopBtn">回到顶部</button>

步骤2：CSS样式

接下来，为回到顶部的按钮添加样式，让它看起来更加美观。以下是一个简单的样式示例：

#backToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    background-color: #333;
    cursor: pointer;
}

步骤3：JS实现

3.1：监听滚动事件

使用 window.addEventListener 监听窗口滚动事件，以便在滚动时显示/隐藏“回到顶部”按钮。

window.addEventListener('scroll', function() {
    if (window.pageYOffset > 100) {
        document.getElementById("backToTopBtn").style.display = "block";
    } else {
        document.getElementById("backToTopBtn").style.display = "none";
    }
});

3.2：滚动到页面顶部动画效果

当点击“回到顶部”按钮时，使用 window.requestAnimationFrame 以动画的方式将页面滚动到顶部。

document.getElementById("backToTopBtn").addEventListener('click', function() {
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
        window.requestAnimationFrame(scrollToTop);
    }
});

function scrollToTop() {
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, currentScroll - (currentScroll / 5));
    }
}

以上是一个简单的实例，你可以根据需要对其进行修改或优化。

示例说明1

假设你在网站中添加了一个分页功能，用户需要频繁地进行翻页。为了提升用户体验，你决定添加一个回到顶部的按钮，让用户能够更轻松地返回页面顶部。你可以使用上面的代码示例，将其添加到网站中。

示例说明2

假设你的网站是一个博客网站，最近你新增了一篇非常长的文章，用户需要滚动页面才能浏览完整篇文章。为了提升用户体验，你决定添加一个回到顶部的按钮，让用户能够更轻松地返回页面顶部。你可以使用上面的代码示例，将其添加到网站中。