1、整体功能概述

此代码实现了在网页中点击 “返回顶部” 按钮，页面以动画效果平滑滚动到顶部的功能。当页面滚动超过一定距离时，“返回顶部” 按钮会显示；而当页面滚动到较接近顶部的位置时，按钮则会隐藏。

2、CSS

        #back-to-top {
            position: fixed;
            bottom: 20px;
            right: 10px;
            background-color: #333;
            color: white;
            padding: 10px;
            cursor: pointer;
            display: none;
        }
        <div id="back-to-top">返回顶部</div>

3、jQuery

        $(document).ready(function () {
            // 当滚动条滚动时，判断是否显示返回顶部按钮
            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });

            // 点击返回顶部按钮时，页面平滑滚动到顶部
            $('#back-to-top').click(function () {
                $('html, body').animate({ scrollTop: 0 }, 500);
                return false;
            });
        });

4、代码分析

back-to-top用固定定位fixed；bottom:20px; right:10px;

$(document).ready()：此函数确保在文档加载完成后再执行其中的代码。

$(window).scroll()：当窗口滚动时触发该函数，依据滚动距离判断是否显示或隐藏返回顶部按钮。若滚动距离scrollTop()超过 300 像素，使用 fadeIn() 方法淡入显示按钮；反之，使用 fadeOut() 方法淡出隐藏按钮。

$('#back-to-top').click()：当点击返回顶部按钮时触发该函数，使用 animate() 方法使 html 和 body 元素以 500 毫秒的动画效果滚动到页面顶部。return false; 用于阻止默认行为。

动画效果：使用 animate() 方法实现平滑滚动，增强了用户体验。

打赏