输入搜索词并单击“搜索”后，该页面会将用户带回到顶部，他们必须向下滚动才能查看结果

Question

（抱歉，如果我没有使用正确的术语——我是一名学生，这个问题超出了我们正在学习的内容，因为有一个精心策划的正式阅读/资源列表可供参考！）

我正在做一个最终项目（assignment=PHP 站点，其中有一个部分可以搜索 SQL 数据库并在表中返回结果；一直在学习 Bootstrap 以尝试设计项目站点的样式）。 我终于完成了很多我一直坚持的工作（实际上，感谢其他人在本网站上发布他们的问题/问题）！

但是，我无法弄清楚如何最好地搜索资源以解决在我的项目站点上显示搜索结果时遇到的问题：现在，当用户输入搜索词并单击“搜索”按钮时，他们是回到网页的顶部，然后必须向下滚动才能看到搜索结果。

以下是我在寻找合适的阅读材料方面的尝试：

我在谷歌上搜索了与显示搜索结果相关的术语，并提出了很多可用性指南（这很有用，我收藏了以后阅读），但没有技术细节（或者我没有意识到）。

“如何让搜索结果返回到页面中的搜索栏”

“如何让搜索结果返回到页面中的特定位置”

“显示搜索结果”

“显示搜索结果+加载”
我扫描了“操作方法”侧边菜单并搜索了 W3 站点： https : //www.w3schools.com/howto/default.asp

“搜索结果”
我在这里搜索了与上面类似的术语

根据我经历的上述结果，以下是我前进的问题：

似乎这是我必须使用 JavaScript 的东西——这是正确的吗？
是否有其他有用的搜索词可以尝试？ （例如，我现在要开始阅读有关“焦点”的内容）

非常感谢您在缩小我的搜索选项方面的任何指导！！！

更新！

什么工作：向“搜索”和“清除”按钮添加表单操作属性，并将这些属性设置为加载到页面搜索部分的锚点！！！

我是如何找到它的：我一直在寻找如何在 javascript 中的一个按钮上调用多个动作（这样我就可以同时拥有焦点动作和清除动作，例如，在其中一个按钮上），一个结果是这个页面关于"multiple form submit for different form action" ，这让我搜索了更多关于 formaction 的信息，这让我找到了https://www.geeksforgeeks.org/html-button-formaction-attribute/ ，最终找到了w3schools 页面。

再次感谢让我走上正确的道路，肯！

Answer 1

我希望这会给你一个想法，可以帮助你弄清楚你想要实现的目标。

function getFocus() {
  document.getElementById("mySearch").focus();
}

function loseFocus() {
  document.getElementById("btn").focus();
}

.mySearch{margin-top: 100%;}

<!DOCTYPE html>
<html>
<body>

<button type="button" id="btn" onclick="getFocus()">Get focus</button>

<p id="p">Try to click this</p>

<button type="button" onclick="loseFocus()">Lose focus</button>

<input type="search" class="mySearch" id="mySearch" placeholder="Search field..">
</body>
</html>

输入搜索词并单击“搜索”后，该页面会将用户带回到顶部，他们必须向下滚动才能查看结果

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-22 19:16:35

输入搜索词并单击“搜索”后，该页面会将用户带回到顶部，他们必须向下滚动才能查看结果

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-22 19:16:35

解决方案1
1 已采纳 2020-11-22 19:16:35