0

我正在尝试使用 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>

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

4

1 回答 1

0

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

<button class="newHomeButton newHomeButton--secondary" data-ste-component="conversion-main" aria-label="" onClick="document.getElementById('main').scrollIntoView({behavior:'smooth'}) "当前>

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

于 2021-04-08T09:42:46.603 回答