Has anyone of you came across a similar problem I have. I have links on one page of my website which redirect to the second page where I have a menu that is showing one menu option at a time. By default, the first option is visible when I open up the second page. But how can I get a result when I click on a link like this to show the hidden div and scroll down to the specific part of the divs content?
Link on the first page. It's supposed to load option 4 and scroll down to anchor #extrainformation.
<div class="linktosecondpage" onclick="window.open('http://localhost/mypage/secondpage#extrainformation','_self');">
</div>
How does the menu look on the second page?
https://jsfiddle.net/wmr03zno/3/
I have considered writing out a function to each link that activates when clicked on the link, redirects to the second page, shows the hidden option of the page, removes and adds class to h4, and scrolls down to desired anchor(#extrainformation). That's the idea I have right now. Just wondering if there is an easier workaround to this kind of problem.
My idea will be to read hash from link and if element with given hash exists scroll to it.
on first page you will have a link like:
<a href="https://example.com/subpage/#anchor">anchor</a>
and on second page you will need something like this:
when page ready state will be changed to interactive check if link contains anchor (location.hash) and if it contains try scrollToElement() function.
In function check if element with given anchor exist and if it does then show it and scroll to it.
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>This involves a bit of JavaScript. On load you can look for the 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() to navigate to that element.
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>I've been thinking about it and trying stuff out. I tried out solutions above answered by @ciekals11 and @chrwahl but couldn't get these working. Probably because I am too amateur with js/Jquery.
Anyways my solution looks like this.
$(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;
}
});
This probably isn't the best answer but it works. Any other recommendations and solutions are welcome.