I'm using scroll-snap to snap to different sections to create a nice slideshow effect while scrolling. I want to have a button at the bottom that scrolls back to the top when clicked, but recommendations I have seen for this functionality are not working.
I am working in ASP.NET MVC 5. I'm assuming the scroll-snap is causing a problem, or maybe the the window thinks it's already at the top of the page for some reason.
$("#return-to-top-button").click(function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'fast');
return false;
});* {
margin: 0px;
padding: 0px;
}
body {
overflow-y: hidden;
}
div {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section {
height: 100vh;
scroll-snap-align: center;
}
.scroll-one {
background-color: red;
}
.scroll-two {
background-color: blue;
}
.scroll-three {
background-color: green;
}
.scroll-four {
background-color: orange;
}
.scroll-five {
background-color: yellow;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
<section>
<p>Section 1</p>
</section>
<section class="scroll-one">
<p>Section 2</p>
</section>
<section class="scroll-two">
<p>Section 3</p>
</section>
<section class="scroll-three">
<p>Section 4</p>
</section>
<section class="scroll-four">
<p>Section 5>/p>
</section>
<section class="scroll-five">
<p>Section 6</p>
<a id="return-to-top-button" href="#">Return to top</a>
</section>
</div>