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

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

您可以将位置存储在本地存储中或将其附加到URL。 这已在此处得到解答：刷新页面并保持滚动位置。

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

问题描述

2 个解决方案

解决方案1
2 2016-06-27 16:06:04

解决方案2
0 2016-06-27 15:32:52

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

问题描述

2 个解决方案

解决方案1 2 2016-06-27 16:06:04

解决方案2 0 2016-06-27 15:32:52

解决方案1
2 2016-06-27 16:06:04

解决方案2
0 2016-06-27 15:32:52