ASP.NET页面调用scrollIntoView()实现锚点滚动后自动重载回顶的解决方法

我来帮你搞定这个问题！核心原因在于你的<a>标签因为设置了asp-page=""，点击时会触发浏览器默认的页面跳转行为（重新加载当前页面），所以刚滚动到目标位置就被刷新打回顶部了。这里有几个靠谱的解决办法：

办法1：阻止a标签的默认跳转行为（推荐） #

修改你的JavaScript函数，加入阻止默认事件的代码，同时在点击事件里传入event对象：

第一步：更新privacyPageScrollToElement.js代码 #

function privacyPageScrollToElement(event) {
    // 阻止浏览器默认的跳转刷新行为
    event.preventDefault();
    var elmnt = document.getElementById("OtherInformationTitle");
    elmnt.scrollIntoView(true);
}

第二步：修改CSHTML里的a标签 #

把event参数传递到点击函数中：

<a asp-page="" asp-route-culture="@CultureInfo.CurrentCulture.Name" id="PrivacyOtherInformationLink" onclick="privacyPageScrollToElement(event)">@_loc[Model.PrivacyOtherInformationLink]</a>

或者更简单的写法，直接在onclick里返回false（同样能阻止默认行为）：

<a asp-page="" asp-route-culture="@CultureInfo.CurrentCulture.Name" id="PrivacyOtherInformationLink" onclick="privacyPageScrollToElement(); return false;">@_loc[Model.PrivacyOtherInformationLink]</a>

这样点击后只会执行滚动逻辑，不会触发页面刷新，就能停留在目标位置了。

办法2：用原生锚点替代JS（更简洁） #

既然目标元素有明确的ID，完全可以利用HTML原生的锚点功能，不需要额外写JS。修改a标签的href属性直接指向目标元素ID：

<a href="#OtherInformationTitle" id="PrivacyOtherInformationLink">@_loc[Model.PrivacyOtherInformationLink]</a>

如果需要保留culture路由参数，也可以这样写（注意锚点#要放在参数后面）：

<a href="?culture=@CultureInfo.CurrentCulture.Name#OtherInformationTitle" id="PrivacyOtherInformationLink">@_loc[Model.PrivacyOtherInformationLink]</a>

这种方式浏览器会自动滚动到目标位置，且不会触发页面刷新（仅锚点变化时浏览器不会刷新页面）。

办法3：把a标签改成非链接元素 #

如果不需要asp-page生成的路由功能，可以把<a>换成<span>或<button>，模拟链接样式，这样就不会有默认跳转行为：

<span style="cursor: pointer; color: #007bff; text-decoration: underline;" id="PrivacyOtherInformationLink" onclick="privacyPageScrollToElement()">@_loc[Model.PrivacyOtherInformationLink]</span>

点击这个span就只会执行你的滚动JS，不会刷新页面。

为什么你之前的修改会在页面加载时滚动？ #

你之前把滚动代码放在$(function(){})里，这个函数是DOM加载完成后自动执行的，所以页面一打开就会滚动到目标位置，但点击链接时的默认跳转问题还是没解决，所以点击后依然会刷新回顶。

内容的提问来源于stack exchange，提问作者DMur