Automatically scroll to a div when Flask returns rendered template

Question

I want to scroll to a specific div on the rendered template. I know I can add an anchor like #something, but I'm rendering the template, I can't change the url. How can I do this?

<div id="something">...</div>

def search():
    ...
    return render_template('search.html')  # should scroll to #something

davidism · Accepted Answer · 2018-09-04 16:17:02Z

14

You can't do anything on the response from the server, but you can add a small JavaScript snippet on the rendered template that will scroll the page to where you want. See Element.scrollIntoView or location.hash.

# pass scroll if you want to scroll somewhere
return render_template('search.html', scroll='something')

<div id="something">
{% if scroll %}
<script>
    document.getElementById('{{ scroll }}').scrollIntoView();
    // or
    document.location.hash = '#' + '{{ scroll }}';
</script>
{% endif %}

See How to scroll HTML page to given anchor? for more information.

If you're redirecting, so you can control the URL, see Link to a specific location in a Flask template.

edited Sep 4, 2018 at 16:17

answered Aug 6, 2015 at 19:03

davidism

128k31 gold badges417 silver badges348 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Automatically scroll to a div when Flask returns rendered template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related