将参数从 URL 添加到元素并滚动到元素答案

【问题标题】：Add parameter from URL to an element and scroll to element将参数从 URL 添加到元素并滚动到元素
【发布时间】：2020-09-14 14:08:57
【问题描述】：

我在按钮上有一个如下所示的网址：

www.mywebsite.com/infopage?scrollTo=section-header&#tab3

当我点击按钮时，它会按预期转到上面的 URL 并打开名为 tab3 的选项卡，该选项卡被设置为锚点。

但是，我希望它位于tab3 内容中的特定标题上。

这可以用 vanilla JavaScript 完成吗？我正在尝试将 URL 中的“section-header”值添加为第二个锚点并以某种方式滚动到它。

这里有window.scrollTo 的选项吗？

在此先感谢您的帮助，我已经四处寻找如何做到这一点，并且是 JavaScript 的初学者。

【问题讨论】：

“我正在尝试将 URL 中的 'section-header' 值添加为第二个锚” - 你指的是片段/哈希部分吗？ # 之后的部分？ URL 中不能有“第二个锚点”。
知道了，所以我不能使用第二个锚来帮助我排除该选项，感谢 Cbroe。 tab3 按预期打开，但我需要滚动到选项卡内的标题，而不仅仅是让页面转到 tab3 锚点。
为什么不把给定的标题作为锚点？
您也许可以将两个值组合成一个哈希值，但是您必须重新实现自动打开正确选项卡的部分。

标签： javascript html typescript

【解决方案1】：

使用scrollIntoView可以获得类似于锚点的滚动效果：

var url = new URL(window.location.href);
var scrollTo = url.searchParams.get("scrollTo");
document.getElementById(scrollTo).scrollIntoView({behavior: 'smooth'});

注意：url.searchParams 有 limited support（不支持 IE）。如果您需要支持旧版浏览器，您可以使用this polyfill 或其他方式从 URL 中获取参数。

【讨论】：