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

Question

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

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

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

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

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

我考虑过为每个 link 写一个函数，当点击 link 时激活，重定向到第二页，显示页面的隐藏选项，删除和添加 class 到 h4，然后向下滚动到所需的锚点（#extrainformation）。这就是我现在的想法。只是想知道是否有更简单的解决方法来解决此类问题。

Answer 1

这涉及到一点JavaScript。在加载时，您可以查找 Location: hash (that you already have in your URL). Do stuff to the page. In my example I create the element that gets the hash and then use 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

我的想法是从 link 中读取散列，如果存在具有给定散列的元素，则滚动到它。

在第一页上您将有一个 link 像：

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

在第二页你需要这样的东西：当页面就绪状态将更改为 interactive 时，检查 link 是否包含锚点 (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;
    }
});

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

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

Click on url, redirect to another page and scroll down to hidden anchored div

html

javascript

css

jquery

menu