Question

我的网站有一个页面，其中有几个部分。它具有如下所示的链接，用户将用户滚动到指定的部分。

<a href="#section">Section</a>

键入www.my-site.com＃部分也可以解决问题。

在调用render_template（＆＃39; page.html＆＃39;）时，如何让Flask滚动到页面的某个部分？有没有办法做类似

的事情

render_template('page.html', section=section)

然后在html中执行

{% if section %}
scroll_to_section
{% endif %}

？我真的不知道如何处理这个问题。任何帮助都感激不尽。谢谢！

Answer 1

假设您已经在页面中加载了jquery：

添加：

{% if section %}
<script>
    $(function() {
       $("html, body").animate({ scrollTop: $("#{{ section }}").offset().top }, 500);
    });
</script>
{% endif %}

这将在页面加载后执行滚动。它将滚动到元素section的元素顶部，延迟时间为500毫秒。

Answer 2

您可以通过以下方式使用JQuery执行此操作：

{% if section %}
<script>
    $(function() {
       $("html, body").scrollTop( $("#{{ section }}").offset().top );
    });
</script>
{% endif %}

或者使用location.hash纯粹的Javascript：

{% if section %}
<script>
    $(function() { 
       location.hash = "#{{ section }}" 
    });
</script>
{% endif %}

如果您需要制作动画，@Jean-Marc S. answer是最佳选择。

如何让Flask滚动到页面的一部分？

2 个答案: