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

Question

My website has one page with several sections. It has links that look like the following that scroll the user to the indicated section.

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

Typing www.my-site.com#section will also do the trick.

How do I make Flask scroll to a section of the page when calling render_template('page.html')? Is there a way to do something like

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

and then in the html do

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

? I seriously have no idea how to handle this. Any help will be much appreciated. Thanks!

Answer 1

Assuming you have jquery loaded in the page already:

Add this:

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

This will execute a scroll after the page has loaded. It will scroll to the top of the element with id section with a 500ms delay.

Answer 2

You can do it with JQuery in the following way:

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

Or in pure Javascript using location.hash :

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

If you need to animate, @Jean-Marc S. answer is the way to go.