How to make header clickable? [duplicate]-CodePudding

This question already has answers here:

I wanna land here:

How can I do that?

CodePudding user response：

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>

CodePudding user response：

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>

Page link：https//www.codepudding.com/os/140988.html

Prev:In Mui, how do I use theme values in my css

Next:Style html elements dynamically based on id