I am facing an issue with my webpage that is similar to the code provided below:
var btn = document.getElementById('test')
test.addEventListener("click", function(){
window.scroll(0,0)
})
.wrap {
overflow-y: scroll;
position: absolute;
left: 0;
top: 0px;
right: 0;
bottom: 0;
}
.container {
height: 1280px
}
button {
margin-top: 500px;
}
<div class="wrap">
<div class="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin consequat massa et rutrum. In vel nulla pulvinar, sagittis ligula nec, pellentesque ligula. Proin ut nisl nec metus pellentesque congue eget tincidunt lectus. Proin nibh felis, vulputate eget vehicula et, viverra et sem. Aenean ornare felis id eros tincidunt rutrum ac eu magna. Nullam eleifend sit amet sapien id commodo. Praesent et est sagittis, vehicula velit ac, vehicula turpis. Aenean vel erat sem. Integer id tellus nisl. Donec interdum aliquam arcu, ac sagittis sem eleifend non. Sed tincidunt, massa a consequat venenatis, diam metus sodales eros, ut rutrum diam sem nec nisi. Vestibulum mattis nisl eu nulla posuere, a porta ante commodo. Duis in mauris ex. Ut a leo suscipit, posuere nulla eget, tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc finibus commodo nisl, sed aliquam odio condimentum in.
Mauris tincidunt neque quis gravida volutpat. Proin mi enim, rutrum a eleifend ut, bibendum non turpis. Curabitur iaculis turpis vitae magna scelerisque lacinia. Suspendisse interdum fringilla ex ut laoreet. Cras convallis leo est, id congue diam fringilla et. Nullam tristique elit in fermentum vestibulum. Vivamus varius vehicula mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a ligula vitae odio scelerisque interdum. Integer sed dui magna. Morbi placerat turpis id sollicitudin mattis.
Praesent pharetra pulvinar diam, in tincidunt turpis tempus eget. Phasellus luctus luctus consectetur. Vivamus tempor tellus eu justo eleifend luctus. Sed euismod at nisi aliquam facilisis. Nam eleifend volutpat lacus eu ornare. Ut fermentum dui eget tortor scelerisque venenatis. Vivamus pretium, justo id feugiat scelerisque, arcu ligula venenatis ante, nec maximus turpis elit et dui. Cras eget risus nulla. Vestibulum feugiat diam non viverra posuere. Nam ex sem, commodo volutpat sodales vel, euismod id sem.
Fusce ultrices semper ligula, quis mattis dolor blandit sit amet. Nulla placerat pharetra sem. Nulla vulputate placerat diam, sit amet convallis elit vulputate sed. Praesent scelerisque est sed orci gravida varius. Aenean non tellus lobortis, pretium nisl ultricies, semper diam. Vivamus non lectus a metus dictum varius. Praesent vehicula sodales sodales. Aliquam et nisi a ipsum viverra mollis. Sed aliquam ac lacus et laoreet. Morbi gravida sem vitae commodo semper. In hac habitasse platea dictumst. Quisque a ultricies sapien. Maecenas condimentum tellus tellus, eget pretium nulla lobortis consequat. Nam posuere malesuada dolor.
Pellentesque malesuada sapien ut sagittis porta. Maecenas eget lorem in nibh tristique euismod pretium at magna. Nulla posuere bibendum consequat. Curabitur pharetra elementum tellus, eget fringilla eros vestibulum quis. Sed varius ac tortor at cursus. Nulla facilisi. Pellentesque non elit vel metus bibendum imperdiet. Nullam venenatis luctus tellus. Maecenas sed molestie risus. Quisque in est in lectus euismod pretium.
</div>
<div>
<button id="test">
Click me To Top
</button>
</button>
</div>
</div>
</div>
Upon clicking the button on the page, I was expecting the scroll to move to the top of the screen, however, it does not work as intended. I am looking for a solution using vanilla javascript.