我正在尝试让我的 Blazor Server 应用程序成为 运行 平滑滚动的 J 查询脚本

I'm trying to get my Blazor Server app to run a smooth scroll J Query script

我想平滑滚动到框中的每个 hrefs class。我的index.razor页面如下...

<html>
<body>
    <div class="sidebar">
        <ul class="box">
            <li><a href="#home"><img class="icon"></a>O</li>
            <li><a href="#info"><img class="icon"></a>O</li>
            <li><a href="#blog"><img class="icon"></a>O</li>
            <li><a href="#contact"><img class="icon">O</a></li>
        </ul>
    </div>
    <div class="underlay">
        <section id="home">
            <h1>Hello!</h1>
        </section>
        <section id="info">
            <h1>About</h1>
        </section>
        <section id="blog">
            <h1>Service</h1>
        </section>
        <section id="contact">
            <h1>Contact</h1>
        </section>
    </div>


<script>
    $(".sidebar a").on('click', function (event) {
            if (this.hash !== "") {
    
                event.preventDefault();
    
                var hash = this.hash;
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function () {
                    window.location.hash = hash;
                });
            }
        });
</script>

我试过使用互操作和 运行 脚本。我相信脚本是 运行ning 在 Blazor 编译之前。知道如何解决这个问题吗？

我想你想做的是片段导航：当用户点击 link 时，它会滚动到片段，对吗？

您可以在 Blazor Server 中执行此操作，但这需要一些技巧。幸运的是，了不起的 Chris Sainty 写了一篇完整的博客 post，其中详细解释了它 here

简而言之，您必须使用 Javascript Interop，但要使其正常工作，必须完成大量的连接工作。我刚刚在一个网站上实现了它并且效果很好。