使用 JavaScript 滚动到页面顶部

技术背景

在网页开发中，常常需要实现滚动到页面顶部的功能，比如提供一个“返回顶部”的按钮，方便用户在浏览长页面时快速回到页面起始位置。JavaScript 提供了多种方法来实现这一功能，同时还可以结合 jQuery、React.js 等库和框架来简化开发。

实现步骤

1. 直接滚动到顶部（无动画）

使用 window.scrollTo() 方法，传入 0, 0 即可立即将页面滚动到左上角。

window.scrollTo(0, 0);

2. 平滑滚动到顶部

原生 JavaScript 方法

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

使用 jQuery

$("a[href='#top']").click(function() {
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
});

3. 结合 React.js 实现

import { useEffect, useState } from 'react';

export default function ScrollToTop() {
    const [isVisible, setIsVisible] = useState(false);

    const handleScroll = () => setIsVisible(window.scrollY > 500);
    const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <button
            style={{
                all: 'unset',
                fontSize: '1.5rem',
                position: 'fixed',
                right: '20px',
                bottom: '20px',
                cursor: 'pointer',
                transform: 'scale(1.8)',
                opacity: isVisible ? 1 : 0,
                transition: '0.3s',
            }}
            onClick={scrollToTop}
        >
            &#128285;
        </button>
    );
}

4. 跨浏览器兼容性处理

为了确保在不同浏览器中都能正常工作，可以同时选择 html 和 body 标签。

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

核心代码

原生 JavaScript 平滑滚动

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

jQuery 实现平滑滚动

$("a[href='#top']").click(function() {
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
});

最佳实践

• 使用 CSS 辅助：可以使用 scroll-behavior: smooth 属性来实现平滑滚动效果。

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

• 优化性能：避免使用过多的动画效果，以免影响页面性能。可以根据用户的滚动位置动态显示或隐藏“返回顶部”按钮。

常见问题

1. 在某些浏览器中滚动无效

可能是由于浏览器兼容性问题导致的。可以尝试同时选择 html 和 body 标签，或者使用原生 JavaScript 方法。

2. 回调函数执行多次

当同时选择 html 和 body 标签时，回调函数可能会执行两次。可以通过判断滚动位置来避免这种情况。

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

3. 在 SharePoint 2016 中无法滚动

需要使用特定的方法来实现滚动。

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;