Twitter Bootstrap Question posted in

Twitter bootstrap – 'Submit' button in Bootstrap scrolling to top

I have created a single page portfolio template using Bootstrap framework from Twitter. I am having an issue that when I click on “Submit” button in the contact form, the page scrolls all the way to top. I have checked that I have not used any internal linking to top so I am not sure why this happening. My intention is to stay on the same page and show user some friendly message. Can anyone help me figure out the issue? Thanks in advance!

Template can be accessed at:

https://rawgit.com/gupta235/portfolio_template_bootstrap/master/index.html

I have made the template available on my github page: https://github.com/gupta235/portfolio_template_bootstrap

Tags:

2

Answers


  1. 0

    Forms typically send you to a new page. Since your form is all in one page, the “new page” its sending you to is the same one you were already on, and so it sends you to the first part of that page, which is the top.

    You can prevent the page from scrolling to the top by giving the form an action ability that instead of sending you to a new page or the top of the current page, will take you to an id that you place somewhere on the page.

    Same concept as putting an anchor point on your page and giving people an option to click a link that takes them to a certain part of the page.

    For example if you change your form opening code from

    <form method="post">

    to this instead

    <form method="post" action="#error-check" id="error-check">

    This should take you to the form when you hit submit, instead of the top of the page.

    Login or Signup to reply.
  2. 0

    A form without an action attribute is not a form, according to standards – and will actually cause a page reload in some browsers.. I’ve found that action=”javascript:void(0);” works well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search