JS JQ 定位到元素位置, 并滚到聚焦到元素

JS

在 JavaScript 中，可以使用 scrollIntoView() 方法来将页面滚动到特定元素的位置。这个方法可以直接应用于元素节点上。

例如，假设我们有一个具有 id 为 my-element 的元素，我们可以使用以下代码将页面滚动到该元素的位置，并将其聚焦：

const element = document.getElementById("my-element");
element.scrollIntoView({ behavior: "smooth", block: "center" });

在上面的代码中，scrollIntoView() 方法的参数对象中设置了两个属性：behavior 和 block。其中，behavior 属性指定滚动行为（这里设置为 smooth 表示平滑滚动），block 属性指定聚焦位置（这里设置为 center 表示居中）。

注意：scrollIntoView() 方法不是所有浏览器都支持的，但在大多数主流浏览器中都可以使用。

JQ

在 jQuery 中，可以使用 scrollTop() 方法来设置页面滚动的位置，同时可以使用 offset() 方法来获取元素在文档中的位置。结合这两个方法，可以实现将页面滚动到特定元素的位置，并将其聚焦。

例如，假设我们有一个具有 id 为 my-element 的元素，我们可以使用以下代码将页面滚动到该元素的位置，并将其聚焦：

const element = $("#my-element");
const offsetTop = element.offset().top;
$("html, body").animate({ scrollTop: offsetTop }, "slow");

在上面的代码中，首先使用 $() 方法获取 id 为 my-element 的元素，然后使用 offset() 方法获取该元素在文档中的位置，并将其保存在变量 offsetTop 中。接下来，使用 animate() 方法来平滑滚动页面到 offsetTop 的位置，实现了将页面滚动到特定元素的位置，并将其聚焦的效果。

注意：需要在 jQuery 中使用 animate() 方法来实现平滑滚动的效果。如果要实现直接跳转到特定元素位置的效果，可以直接使用 scrollTop() 方法。