我想平滑滚动到box类中的每个hrefs。我的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>
我已经尝试使用interop和来运行脚本。我相信这个脚本在Blazor编译之前就已经运行了。知道怎么解决这个问题吗？
我想你要做的是片段导航：当用户点击链接时，它会滚动到片段，对吗？
您可以在Blazor服务器中执行此操作，但这需要一些技巧。幸运的是，令人惊叹的Chris Sainty写了一篇完整的博客文章，在这里详细解释了
简言之，您必须使用Javascript Interop，但要使其发挥作用，必须进行大量的连接。我刚刚在一个网站上实现了这一点，效果很好。