在 ASP.NET MVC 站点中返回视图时操作页面滚动

Posted 2023-02-26

【中文标题】在 ASP.NET MVC 站点中返回视图时操作页面滚动

【英文标题】：Manipulating page scrolling when returning a View in an ASP.NET MVC site

【发布时间】：2010-07-14 05:17:40

【问题描述】：

我正在构建一个 ASP.NET MVC 站点，我希望返回的视图之一自动滚动到某个点。

我希望发生这种情况的网站部分有点像论坛 - 有包含“帖子”的“线程”。用户可以浏览到整个分页线程，也可以使用其 ID 浏览到特定帖子。当用户浏览到特定帖子时，我想显示常规线程界面，然后浏览到帖子所在的页面并向下滚动到帖子。

当从 ASP.NET MVC 站点中的操作返回视图时，是否可以以某种方式自动向下滚动到某个点？如果是这样，我该怎么做？

注意：我发现解决此问题的一个方法是 Stack Overflow 和其他 Stack Exchange 站点如何做到这一点：可以通过在 URL 中添加 #ID 来链接问题的每个答案。如果在返回视图时无法自动向下滚动，我会改为实现，但是当有多个页面并且相关帖子不在当前页面上时，我不明白如何使用这种方法。 em>

---

更新：

基于Chris' answer，我目前计划使用如下所示的 URL 来实现它：example.com/forum/[ForumID]/thread/[ThreadID]/post/[PostID]#[PostID]。在我的 Action 中，我确定了帖子在 Thread 的哪个页面上，然后我将该页面中的所有帖子返回到视图。

但是，我注意到 Stack Overflow 如何解决这个问题的一些特别之处。尝试前往：https://meta.stackexchange.com/questions/57170 - 它最终会将您发送至 https://meta.stackexchange.com/questions/57155/gravatar-bugs-and-improvements-in-chat/57170#57170。

以上是如何实现的？这正是我想要完成的。

【参考方案1】：

您可以在视图中使用 javascript 来实现自动滚动，例如 jQuery ScrollTo 插件 (http://plugins.jquery.com/project/ScrollTo)。将其附加到您的页面加载事件并定位您想要的帖子。

但是，最简单的方法（并且大多数跨浏览器兼容）就像 *** 的做法一样，在 URL 中使用 #ID。

【讨论】：

@Chris：关于#ID 方式：如何让它跨页面工作？毕竟，我一次只能加载一页，对吧？

将帖子的链接设为完整链接。因此，您的 href 不是（例如）只是#ID，而是使用 example.com/forum/2/thread/100/Page/2/#ID

除非我找到其他解决方案，否则我会将其实现为类似于example.com/forum/[ForumID]/thread/[ThreadID]/post/[PostID]#[PostID]。这是因为对链接中的页码进行硬编码并不是很好，因为页码可以更改（在我的系统中）。我想我会先读取 PostID，返回该 Post 所在的页面，然后# 将激活。

快速提问：我理解它在大多数情况下是如何工作的，但我注意到在 Stack Overflow 上有一些特别的东西，这正是我正在寻找的东西。 尝试转到：meta.stackexchange.com/questions/57170 - 它最终会将您发送到 meta.stackexchange.com/questions/57155/…。 这是如何实现的？这就是我想要完成的。

这是通过查找答案 ID 并重定向到带有#ID 的正确问题页面以跳转到正确答案来完成的。从本质上讲，它就像您正在考虑实施的那样。