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

【问题标题】：After entering a search term and clicking "search," the page brings users back up to the top and they have to scroll down to see the results输入搜索词并单击“搜索”后，页面将用户带回顶部，他们必须向下滚动才能查看结果
【发布时间】：2021-03-05 12:21:43
【问题描述】：

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

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

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

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

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

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

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

“显示搜索结果”

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

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

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

看来这是我必须使用 JavaScript 来完成的事情——这是否正确？
还有其他有用的搜索词吗？（例如，我现在要开始阅读有关“专注”的内容）

非常感谢您在缩小搜索范围方面提供的任何指导！！！

更新！

什么有效： 将form action 属性添加到“搜索”和“清除”按钮，并将这些属性设置为加载到页面搜索部分的锚点！！！

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

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

【问题讨论】：

标签： javascript php css sql search

【解决方案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>

【讨论】：

谢谢，这非常有用！我只是将它粘贴到一个新文件中，它在那里工作，现在我将更多地使用它。就附加阅读而言，看起来重点是解决这个问题的方法——我将从 W3schools 的东西开始（欢迎任何其他建议的阅读材料）！