我使用了Arron Hudon的答案,它仍然不起作用。然而,在玩了一圈之后,我意识到它不会与锚元素一起工作:<a id='star_wars'>Place to jump to</a>。显然Blazor和其他spa框架在同一页面上跳转到锚点时会出现问题。为了解决这个问题,我不得不使用段落元素(section也可以):<p id='star_wars'>Some paragraph<p>。 使用bootstrap的示例:
<button class="btn btn-link" onclick="document.getElementById('star_wars').scrollIntoView({behavior:'smooth'})">Star Wars</button>
... lots of other text
<p id="star_wars">Star Wars is an American epic...</p>
6条答案
按热度按时间b4lqfgs41#
我已经通过使用
button
并在标记中编写一些内联Javascript解决了这个问题。omhiaaxx2#
您需要的是Blazor的散列路由功能。但是,唉,目前还没有这样的功能。我建议您使用JSIterop来执行此任务:创建一个执行导航的JavaScript,并向其传递一个ElementRef对象。
希望这对你有帮助…
编辑:以下是我在Github中找到的最佳解决方案的改编...
通常情况下,当你点击联系人的链接时,你会被重定向到路由http://localhost:5000/mypage#contact,但会在页面的顶部。路由的片段不用于选择特定的HTML元素。
目前的解决方法是编写解释URL的显式代码。在上面的示例中,我们可以使用一点JavaScript,然后从Blazor代码调用它:
mypage.cshtml:
index.html:
注意:如果你使用的是Blazor版本.9.0,你应该注入IJSHruntime请让我知道这个解决方案是否适合你...
gkl3eglg3#
你可以使用两个Nuget包来解决这个问题:
1.滚动JS这是JsInterop Nuget的一部分。这有许多功能,请参阅文档,但主要部分是
IScrollHandler
这是一个可注入的服务。你可以尝试与演示应用程序。你可以看到scrollIntoView()
和其他JS功能 Package ,平滑滚动可用。所以更简单地使用JS滚动支持...1.第二个选择是在你的URL中使用“Parmalinks”,你有“#”。这里有Nuget。这是你所要求的。基本上它使用的是
<a>
标签,但你不必为此烦恼(注意,即使是演示应用程序有#网址)。还呈现“链接”组件与可点击的图标和导航/复制动作。目前平滑滚动不可用,但可以请求。您可以使用演示应用程序进行尝试。x1c 0d1xw8f9ii694#
我使用了Arron Hudon的答案,它仍然不起作用。然而,在玩了一圈之后,我意识到它不会与锚元素一起工作:
<a id='star_wars'>Place to jump to</a>
。显然Blazor和其他spa框架在同一页面上跳转到锚点时会出现问题。为了解决这个问题,我不得不使用段落元素(section也可以):<p id='star_wars'>Some paragraph<p>
。使用bootstrap的示例:
请注意,我使用了bootstrap的
btn-link
类来使按钮看起来像一个超链接。baubqpgj5#
答案与Issac的答案相同,但需要更改一些代码。
我发现主要的问题是你需要它是异步的。@johajan
@inject IJSRuntime JSRuntime
...
}
1sbrub3j6#
最简单的方法如下:
1.在你的项目中添加一个javascript文件。
1.在其中添加以下函数:
1.将脚本引用添加到index.html中:
1.回到你的页面,在你的链接上添加一个onclick事件:
1.进样IJS运行时间:
1.创建调用javascript函数的方法: