使用片段在页面刷新时滚动跳转

Question

我有一个评论页面。我们称之为article page。现在，当我添加新评论时，我需要重新加载此页面，因为我需要查看添加的评论。我不能（也不想）直接将它注入DOM中，因为计算它的位置可能非常复杂。

我正在发送一个AJAX请求，作为回应我得到了：

• 评论ID
• article page
的网址

然后我用它来构建myawesomewebsite.com/articlePage/{{articleId}}#{{commentId}}格式的网址。所以基本上，我刷新当前页面，另外我添加了片段部分，以便在页面加载时我可以看到我的新评论。

我用

• window.location = articlePageURL + "#" + commentId构建网址
• 和window.location.reload(true)获取带有新评论的“新”页面

问题是，在使用评论自动滚动到div后，浏览器会跳回到我在上一页的位置（刷新前的同一页面）。

有什么办法可以关闭第二页跳转吗？

Answer 1

我设法实现了我想要的目标。

我没有依赖于自动滚动到URL的哈希片段中给出的id，而是自己滚动到这个元素。关键是在body元素上使用scrollTop css属性并将其与animate函数结合使用。

它不仅像我预期的那样工作，而且它提供了更好的用户体验。