Currently working on a web page that consists of divs with varying heights and text inside them. I would like to implement a feature where clicking on the text within a div automatically scrolls the page so that particular div is positioned at the top of the screen.
Most solutions I've come across involve using the fixed property, but I prefer not to alter the position property of the div itself. Ideally, I want the page to scroll automatically to bring the desired div to the top. Any suggestions on how I can achieve this?
Appreciate any guidance you can provide!
.container {
width: 100vw;
height: auto;
}
.element {
padding: 50px;
}
#element-1 {
background-color: beige;
height: 500px;
}
#element-2 {
background-color: darkSeaGreen;
height: 200px;
}
#element-3 {
background-color: coral;
color: white;
height: 800px;
}
#element-4 {
background-color: MidnightBlue;
color: white;
height: 300px;
}<div class="container">
<div class="element" id="element-1">
<h1>Some text</h1>
</div>
<div class="element" id="element-2">
<h1>Some text</h1>
</div>
<div class="element" id="element-3">
<h1>Some text</h1>
</div>
<div class="element" id="element-4">
<h1>Some text</h1>
</div>
</div>