Tengo una lista de artículos en mi página y, comenzando con el segundo artículo, debería haber un botón de desplazamiento hacia arriba. La pregunta es cómo hacerlo correctamente. Aquí está mi código
php.blade
<div class="blog-list"> @foreach($articles as $article) <div class="blog-article @foreach ($article->blog_categories as $blog_category) category_{{ $blog_category->id }} @endforeach"> <picture> <source srcset="{{ $article->main_image }}"> <img class="article_image" srcset="{{ $article->main_image }}" alt=""> </picture> <div class="container"> //Scroll up <div class="top-button-blog-wrapper"> <div id="scrollTopButtonBlog" class="top-button-blog"> <div class="top-button-blog_text">To top</div> </div> </div> <h2 class="blog-article__title">{{ $article->title }}</h2> <span>{{ date('d F Y', strtotime($article->published_at)) }}</span> </div> </div> @endforeach </div>js
//Scroll up const scrollTopButtonBlog = document.getElementById('scrollTopButtonBlog'); scrollTopButtonBlog.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth', }); }); Ahora mi código agrega un botón de desplazamiento para cada nuevo blog, pero solo funciona para el primero, ¿tal vez este código Scroll up no debería agregarse al artículo en sí, sino por separado y simplemente fijarse en el lugar correcto? ¿Cuál es la mejor manera de proceder aquí?
Aquí hay un ejemplo de cómo lo haría
const scrollTopButton = document.getElementById("scrollTopButton"); document.addEventListener('scroll', function(e) { if(window.scrollY > 100) { // Removing inline style to reset the display property to what's set in stylesheet scrollTopButton.style.opacity = "1"; } else { // Hiding the button with inline style scrollTopButton.style.opacity = "0"; } }); scrollTopButton.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: 'smooth', }); }); #scrollable { overflow:auto; } #firstDiv { background-color: green; height: 1500px; } #scrollTopButton { transition: opacity 0.5s; cursor: pointer; width: 100px; height: 15px; display: flex; align-items: center; justify-content: center; background-color: red; padding: 5px; position: fixed; bottom: 5px; left: 15px; } <div id="scrollable"> <div id="firstDiv"></div> <div id="scrollTopButton" style="opacity: 0">ScrollTop</div> </div>Como puede ver, con un detector de eventos en el desplazamiento, puede saber cuándo se desplaza el usuario y cuántos píxeles se han desplazado hasta ahora. Y en función de esto, puede mostrar/ocultar el botón