javascript - 在表单提交时维护 div 中的滚动位置 - Django

标签 javascript jquery django

所以我有一个很长的 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 请求并重新加载页面:
View .py

elif 'add_event' in request.POST:

                cp = request.POST.copy()

如何在“文章文本”div 中保存滚动进度?不是整个页面,而是特定的 div。希望这里有任何指点。

最佳答案

您的页面上没有表单,因此我猜测您正在使用 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)

关于javascript - 在表单提交时维护 div 中的滚动位置 - Django,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38057674/

相关文章:

javascript - 使用 DocuSign 自定义按钮转义和字符

javascript - Worklight - 打开 native 应用程序

django - 如何实现安全页面

python - 尝试安装 django-haystack

django - 在模板 Django 中访问表单字段属性

javascript - ui-sref 使用新选项卡打开

javascript - 迭代数组以将值添加到幻灯片

javascript - 跟踪 javascript 内存使用情况

jquery - 使用 twitter bootstrap 创建粘性导航栏?

javascript - 如何使用 jquery/javascript && 重置 html 中的表单数据以及如何使用 jquery 将表单数据发送到电子邮件?