0
250
ViewsHow to make header clickable?
I wanna have the feature on my website that if I click one of the topbar navigation elements in the header I wanna be in this section on the website. For example if I click here "How":
I wanna land here:
How can I do that?
·
Juan Pablo Isaza
2 answers
Answer question0
If it's on the same page, look into making headings link targets. The premise being the a tags in your nav point to an id on a heading tag e.g.
<a href="#about-us">...</a>
<!-- will take you to: -->
<h2 id="about-us">About us</h2>
·
Juan Pablo Isaza
Report
0
To get a smooth scrolling experience instead of jumping to an anchor, you can achieve this by by using an eventListener on the header. Then using the getBoundingClientRect() of the how element to get its position on the page.
You can then scroll the window object to the position of the how Element.
let header = document.getElementById('hacker-header');
let how = document.getElementById('how');
header.addEventListener('click', () => {
window.scrollTo({
top: how.getBoundingClientRect().y,
left: how.getBoundingClientRect().x,
behavior: 'smooth'
});
});body {
background: black;
}
h1 {
color:lime;
}
#high {
height: 5000px;
width:200px;
background: linear-gradient(180deg, rgba(112,135,95,1) 0%, rgba(21,55,31,1) 35%, rgba(7,121,5,1) 100%);
}<header id="hacker-header">
<h1>Hacker</h1>
</header>
<div id="high">
</div>
<footer id="how">
<h1>How</h1>
</footer>
·
Juan Pablo Isaza
Report
Answer question