Estoy usando scroll-snap para ajustar a diferentes secciones para crear un bonito efecto de presentación de diapositivas mientras me desplazo. Quiero tener un botón en la parte inferior que se desplace hacia arriba cuando se hace clic, pero las recomendaciones que he visto para esta funcionalidad no funcionan.
Estoy trabajando en ASP.NET MVC 5. Supongo que el ajuste de desplazamiento está causando un problema, o tal vez la ventana cree que ya está en la parte superior de la página por alguna razón.
$("#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>