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

问题描述

我在按钮上有如下网址：

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

当我单击按钮时，它会按预期转到上述URL，并打开名为tab3的标签页，并将其设置为锚点。

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

可以使用普通JavaScript完成吗？我正在尝试将URL中的“ section-header”值添加为第二个锚点，并以某种方式滚动至该位置。

这里window.scrollTo可以选择吗？

在此先感谢您的帮助，我一直在寻找如何做的方法，并且是JavaScript的初学者。

解决方法

使用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获取参数。