如何在Blazor服务端应用中添加返回顶部按钮？

别担心，我来一步步教你搞定这个返回顶部按钮，你已经有wwwroot下的site.js文件，那流程就很顺畅啦：

第一步：添加按钮的HTML和样式 #

首先找个全局的Razor组件来放这个按钮，比如MainLayout.razor（这样所有页面都能用到），在布局的底部区域（比如主内容结束标签之前）添加按钮元素和对应的样式：

<button id="scrollToTopBtn" onclick="scrollToTop()" title="回到顶部">↑ 回到顶部</button>

<style>
    #scrollToTopBtn {
        display: none; /* 默认隐藏按钮 */
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99; /* 确保按钮在其他元素上方 */
        border: none;
        outline: none;
        background-color: #555;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
        font-size: 18px;
    }

    #scrollToTopBtn:hover {
        background-color: #333; /* 鼠标悬停时加深颜色 */
    }
</style>

第二步：在site.js里添加JavaScript逻辑 #

打开你已有的wwwroot/site.js，把下面的代码加进去——这部分负责监听页面滚动来控制按钮显示/隐藏，还有点击按钮滚动到顶部的功能：

// 监听页面滚动事件，控制按钮的显示状态
window.onscroll = function() { scrollFunction() };

function scrollFunction() {
    // 当页面向下滚动超过200px时显示按钮，否则隐藏
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("scrollToTopBtn").style.display = "block";
    } else {
        document.getElementById("scrollToTopBtn").style.display = "none";
    }
}

// 点击按钮后滚动到页面顶部的函数
function scrollToTop() {
    // 基础版：直接跳转到顶部
    document.body.scrollTop = 0; // 适配Safari浏览器
    document.documentElement.scrollTop = 0; // 适配Chrome、Firefox、IE等

    // 想要平滑滚动效果的话，把上面两行换成下面这行即可：
    // window.scrollTo({ top: 0, behavior: 'smooth' });
}

第三步：确认site.js已被正确引用 #

最后检查一下Pages/_Host.cshtml文件，确保里面已经引用了site.js——Blazor服务端项目里通常会在</body>标签前有类似这样的代码：

<script src="site.js"></script>

如果没有的话，手动把这行代码加进去就行，这样你的JS代码才能被页面加载执行。

做完这三步，启动你的Blazor服务端应用，向下滚动页面超过200px，就能看到右下角的返回顶部按钮，点击它就会回到页面顶部啦！

备注：内容来源于stack exchange，提问作者Ivan Debono