javascript - 直接在特定元素上呈现 html 页面而不滚动（Django/JavaScript）

Question

我的问题是关于在使用 Django 和 Bootstrap 时控制页面滚动/锚定目标。

我有一个使用 Bootstrap 设计的 Django 项目。

信息在页面上按顺序呈现。每次用户按下按钮时，新信息都会添加到页面底部。这是通过将所有信息加载到字典中来实现的，但仅根据变量计数呈现它的特定部分，该变量计数存储用户通过案例的距离。

当按钮被按下时，信息被传递到一个视图，该视图检查其完整性，如果可接受，则增加一个计数变量并将用户重定向回原始页面。

由于增加了计数变量，原始页面现在显示新信息。

我正在尝试使用带有 URL 重定向的锚点来确保页面加载新信息。这些锚点有效，但每次用户按下按钮前进然后页面向下滚动时，页面都会从顶部加载。

理想情况下，页面将直接加载到新信息上，或者在用户单击提交的地方重新加载，然后滚动到新信息。

视图的一部分，用于演示当前视图处理重定向到新 div。

def advance_slide(request, **kwargs):
    ...
    anchor = '#' + 'slide_' + str(slide_id)
    return HttpResponseRedirect(reverse('case_play', kwargs={'pk': case_id}) + anchor)

迄今为止的尝试

我乐观地尝试更改页面的滚动行为，但这没有任何好处。

在此之后，我想知道该行为是否是 Bootstrap 的功能，并且我在 Bootstrap 文档中搜索了“锚点”和“链接”。虽然这得到了一些结果，但我认为它们中的任何一个看起来都不像我需要的那样。

我还尝试使用 JS 使用以下 Django 模板来呈现特定元素：

{% if anchor %}
    <script>
        $(document).ready(function(){
            location.assign('{{anchor}}')
        });
    </script>
{% endif %}

在这里，我没有在上面使用带有锚点的 HttpResponseRedirect，而是再次渲染原始页面，但在上下文中传入变量“锚点”。我希望在 HTML 加载 JS 之前将窗口设置为所需的元素。相反，页面在顶部再次加载，然后向下滚动到所需的元素（就像以前一样）。即使我可以将行为更改为跳转而不是滚动 - 我仍然不希望每次用户提交数据时页面都会跳转到顶部，因为某些场景很长。

大多数在线帖子都存在相反的问题——人们试图添加平滑滚动功能而不是删除它。

我可以尝试重写应用程序，以便使用 ajax 处理所有正在处理的数据，但这需要在我认为的视图中进行大量数据处理，这意味着我必须编写 JS 而不是 Python，而我的经验要少得多.

我认为可能有几种不同的方法可以实现我所需要的——在没有任何滚动的情况下将 html 页面加载到特定的 html 元素上——但我无法让它们工作，我不清楚这个项目的最佳解决方案是什么（尽可能多地使用 Django 风格）。

感谢您的时间和您可以提供的任何帮助。

编辑

在对 html 的请求之后。实际的 html 很长，所以我试图将它剥离到裸露的骨头上。在下面的 html 中，我演示了使用 JS 方法尝试的内容。尽管对此没有任何要求，但可以在视图中实现相同的效果。

• case_dict 是包含我可能需要在场景中显示的所有内容的字典的子集。case_dict 包含任何给定计数需要呈现的所有信息（跟踪用户进度的变量）

{% extends 'base.html' %}

{% block content %}

{% if anchor %}
    <script>
        $(document).ready(function(){
            location.assign('{{ anchor }}')
        });
    </script>
{% endif %}

{% for key, value in case_dict.items %}
    <div id="slide_{{ key }}">
        <p>{{ value.something}}</p>
    </div>
{% endfor %}

{% if advance == True %}
    <a href="{% url 'advance_slide' pk=case.case_id %}" class="btn btn-success">Next slide</a>
{% endif %}

{% endblock content %}

标签： javascriptcssdjangoscrollanchor