单击 url，重定向到另一个页面并向下滚动到隐藏的锚定 div

Question

你们中有人遇到过类似的问题吗？我在我的网站的一页上有链接，这些链接重定向到第二页，在那里我有一个菜单，一次显示一个菜单选项。默认情况下，当我打开第二页时，第一个选项是可见的。但是，当我单击这样的链接以显示隐藏的 div 并向下滚动到 div 内容的特定部分时，如何获得结果？

第一页上的链接。它应该加载选项 4 并向下滚动到锚点 #extrainformation。

     <div class="linktosecondpage" onclick="window.open('http://localhost/mypage/secondpage#extrainformation','_self');"> 
    </div>

菜单在第二页上看起来如何？

https://jsfiddle.net/wmr03zno/3/

我考虑过为每个链接编写一个函数，该函数在单击链接时激活，重定向到第二页，显示页面的隐藏选项，删除并添加类到 h4，并向下滚动到所需的锚点（#额外的信息）。这就是我现在的想法。只是想知道这种问题是否有更简单的解决方法。

Answer 1

这涉及到一点 JavaScript。在加载时，您可以查找 Location: hash（您的 URL 中已有）。对页面做一些事情。在我的示例中，我创建了获取哈希的元素，然后使用 Element.scrollIntoView() 导航到该元素。

window.location.hash = 'test'; // For testing. This has already been set in the URL.

document.addEventListener('DOMContentLoaded', e => {
  // find the hash
  let hash = window.location.hash.slice(1); // slice: remove the '#'
  // add a new element (or make is visible etc.)
  document.querySelector('main').innerHTML = `<h2 id="${hash}">${hash}</h2>`;
  // scroll to the anchor
  document.querySelector(`#${hash}`).scrollIntoView();
});

main {
  height: 2000px;
  position: relative;
}

h2#test {
  position: absolute;
  top: 1000px;
}

<main><main>

Answer 2

我的想法是从链接中读取哈希值，如果具有给定哈希值的元素存在，则滚动到它。

在第一页，您将有一个类似的链接：

<a href="https://example.com/subpage/#anchor">anchor</a>

在第二页上，您将需要这样的内容： 当页面就绪状态将更改为 interactive 检查链接是否包含锚点 (location.hash) 以及是否包含尝试 scrollToElement() 函数。
在函数中检查具有给定锚点的元素是否存在，如果存在则显示并滚动到它。

const scrollToElement = (id) => {
    const element = document.querySelector(id);

    if (element !== null) {
        element.classList.remove('hidden');
        element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
    }
};

document.onreadystatechange = () => {
    if (document.readyState === 'interactive') {
        if (location.hash !== '') {
            scrollToElement(location.hash);
        }
    }
};

.hidden {
    display: none;
}

<div style="height: 2000px"></div>
<div id="anchor" class="hidden">anchor</div>

Answer 3

我一直在考虑并尝试了一些东西。我尝试了@ciekals11 和@chrwahl 回答的上述解决方案，但无法让这些工作。可能是因为我对 js/Jquery 太业余了。

反正我的解决方案是这样的。

$(document).ready(function() {
    if (
        window.location.href == "http://localhost/mypage/secondpage#extrainformation"
    ) {
        $(".tabs h4").removeClass("tab-current");
        $(".tabs ul li:nth-child(4) h4").addClass("tab-current");
        $("#section1").fadeOut();
        $("#section4").fadeIn();
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#extrainformation").offset().top
        }, 1000);

        return false;
    }
});

这可能不是最好的答案，但它确实有效。欢迎任何其他建议和解决方案。