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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>