Question

所以我有一个非常长的div，我需要在用户提交表单时保持滚动位置。因为在我不知道如何做之前我从未正确使用过JavaScript。寻找答案并未提供可用的答案。我收集的是因为我使用jQuery，我可能能够使用.scrollTop（），但不仅仅是我不知道。

下面是html页面的粗略草图及其外观：

<html>
<head>
<title>Untitled Document</title>
<style>
#article-text {
    height: 100px;
    overflow: scroll;
}
</style>
</head>
<body>
<div>
Some random text.
</div>
<div id="article-text">
Very, very long text.
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Even more text.
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
That is how long the text is
</div>
<div class="form-nav">
    <input type="submit" name="add_event" value="Add Event">
</div>

</body>
</html>

单击“添加事件”后，将发送POST请求并重新加载页面：
views.py

elif 'add_event' in request.POST:

                cp = request.POST.copy()

如何在“文章 - 文本”div中保存滚动进度？不是整个页面，而是具体的div。会喜欢这里的任何指示。

Answer 1

您的页面上没有表单，因此我猜您正在使用JS / jQuery启动POST请求。

最佳方式：通过AJAX发送请求。

$.post(url, data, function(response){ /* success */ });

这样你就不需要重新加载页面了，它完全保持在之前的滚动位置。

如果由于某种原因需要重新加载，您可以将当前滚动位置从.scrollTop()存储到localStorage，并在每个页面加载检查localStorage以获取该值。

要设置值，请在使用

提交表单之前执行此操作

localStorage.setItem('my-scroll-pos', $(window).scrollTop());

页面重新加载后，返回值。

var pos = localStorage.getItem('my-scroll-pos', 0);
if (pos)
    $(window).scrollTop(pos)

Answer 2

您可以将位置存储在localstorage中或将其附加到URL。这已在此处得到解答：Refresh Page and Keep Scroll Position。

在表单提交中保持div中的滚动位置 - Django

2 个答案: