'Submit' Bootstrap 中的按钮滚动到顶部
'Submit' button in Bootstrap scrolling to top
我使用来自 Twitter 的 Bootstrap 框架创建了一个单页投资组合模板。我遇到一个问题,当我单击联系表单中的 "Submit" 按钮时,页面一直滚动到顶部。我已经检查过我没有使用任何内部链接到顶部所以我不确定为什么会这样。我的意图是保持在同一页面上并向用户显示一些友好的消息。谁能帮我弄清楚这个问题?提前致谢!
可在以下位置访问模板:
https://rawgit.com/gupta235/portfolio_template_bootstrap/master/index.html
我已经在我的 github 页面上提供了模板:https://github.com/gupta235/portfolio_template_bootstrap
表单通常会将您转到新页面。由于您的表单都在一个页面中,"new page" 将您发送到的页面与您已经在的页面相同,因此它会将您发送到该页面的第一部分,即顶部。
您可以通过为表单提供操作功能来防止页面滚动到顶部,该功能不会将您带到新页面或当前页面的顶部,而是将您带到您放置在某处的 ID这一页。
与在您的页面上放置一个锚点并让人们可以选择单击 link 将他们带到页面的特定部分的选项相同。
例如,如果您将表单打开代码从
<form method="post">
改成这个
<form method="post" action="#error-check" id="error-check">
这应该会在您点击提交时将您带到表单,而不是页面顶部。
根据标准,没有 action 属性的表单不是表单 - 实际上会导致某些浏览器重新加载页面。我发现 action="javascript:void(0);" 效果很好。
我使用来自 Twitter 的 Bootstrap 框架创建了一个单页投资组合模板。我遇到一个问题,当我单击联系表单中的 "Submit" 按钮时,页面一直滚动到顶部。我已经检查过我没有使用任何内部链接到顶部所以我不确定为什么会这样。我的意图是保持在同一页面上并向用户显示一些友好的消息。谁能帮我弄清楚这个问题?提前致谢!
可在以下位置访问模板:
https://rawgit.com/gupta235/portfolio_template_bootstrap/master/index.html
我已经在我的 github 页面上提供了模板:https://github.com/gupta235/portfolio_template_bootstrap
表单通常会将您转到新页面。由于您的表单都在一个页面中,"new page" 将您发送到的页面与您已经在的页面相同,因此它会将您发送到该页面的第一部分,即顶部。
您可以通过为表单提供操作功能来防止页面滚动到顶部,该功能不会将您带到新页面或当前页面的顶部,而是将您带到您放置在某处的 ID这一页。
与在您的页面上放置一个锚点并让人们可以选择单击 link 将他们带到页面的特定部分的选项相同。
例如,如果您将表单打开代码从
<form method="post">
改成这个
<form method="post" action="#error-check" id="error-check">
这应该会在您点击提交时将您带到表单,而不是页面顶部。
根据标准,没有 action 属性的表单不是表单 - 实际上会导致某些浏览器重新加载页面。我发现 action="javascript:void(0);" 效果很好。