似乎无法在 blazor 中调用 javascript答案

【问题标题】：Can't seem to call javascript in blazor似乎无法在 blazor 中调用 javascript
【发布时间】：2021-06-28 09:14:21
【问题描述】：

我正在尝试使用 JSinterop，但它似乎不起作用。

我正在尝试使用此 codepen 示例实现返回顶部按钮 https://codepen.io/rdallaire/pen/apoyx

我已将 CSS 和 Javascript 文件添加到主机文件中。加载网站时，它们会被购买到屏幕中。但该按钮从未出现在我的屏幕上。

必须稍微调整 JS 以便它可以被 JsInterop 调用

// ===== Scroll to Top ==== 
function scrollToTopFunc() {
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
            $('#return-to-top').fadeIn(200); // Fade in the arrow
        } else {
            $('#return-to-top').fadeOut(200); // Else fade out the arrow
        }
    });
    $('#return-to-top').click(function() { // When arrow is clicked
        $('body,html').animate({
                scrollTop: 0 // Scroll to top of body
            },
            500);
    });
}

添加到我的页面

@inject IJSRuntime JS;

以及对 javascript 的调用

protected override async Task OnAfterRenderAsync(bool firstRender)
{

    await JS.InvokeVoidAsync("scrollToTopFunc");
}

并将标签添加到页面

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

现在，当我加载页面时，我在 google 开发工具中没有收到任何错误。真的很迷茫。谁能指出我正确的方向？

【问题讨论】：

如果你把console.log('in scrollToTopFunc');和console.log('in return-to-top');放在那里，你能验证javascript至少被调用了吗？

标签： javascript css blazor blazor-jsinterop

【解决方案1】：

我最终通过执行以下操作在不使用 javascript 文件的情况下实现了这一目标

我刚刚将我的标题包裹在一个 id="Main" 的 div 中，并且这份工作做得很好。

【讨论】：