Using jQuery with Flask: how to prevent jumping to top of page on form submission?
When you submit the form the browser will drop the current page and load a brand new one, which comes from your response to the POST request.
You have a few options to get the new page to scroll:
Instead of responding to the POST event with a new page, you can respond with a redirect. In your example you would redirect to
http://<hostname>/home.html#contact. This method may not work with all browsers, as some do not honor hashtags coming in redirects.Your idea of having jQuery do the scrolling as soon as the page loads is a good one, but your jQuery implementation is incorrect. See the answer to this question to learn how to scroll on load.
The two methods above will cause the window to reload, so even though the new page will scroll to the right position the user will notice that the page reloads. An option to prevent the reload is to have jQuery submit the form in the background as an Ajax request, so that the browser does not reload the page. This question will give you some ideas.
Would be much better to use jquery ajax request for the form submission - it will solve two problems:
- Your page won't be refreshed at all
- better user experience
http://www.techillumination.in/2014/08/python-flask-and-jquery-ajax-post.html