Tengo una página de blog con una lista de artículos, agregué un botón de desplazamiento hacia arriba aquí, aparece cuando nos desplazamos por los artículos, pero hay problemas con este botón. Aquí está mi código

js

 const scrollTopButtonBlog = document.getElementById('scrollTopButtonBlog'); document.addEventListener('scroll', function(e) { if(window.scrollY > 1000) { scrollTopButtonBlog.style.opacity = "1"; } else { scrollTopButtonBlog.style.opacity = "0"; } }); scrollTopButtonBlog.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth', }); });

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"> <h2 class="blog-article__title">{{ $article->title }}</h2> <span>{{ date('d F Y', strtotime($article->published_at)) }}</span> </div> </div> @endforeach </div> //Scroll up <div id="scrollTopButtonBlog" class="top-button-blog" style="opacity: 0"> <div class="top-button-blog_text">To top</div> </div>

CSS

 .top-button-blog { transition: opacity 0.5s; cursor: pointer; padding: 5px; position: fixed; bottom: 450px; right: 20px; } .top-button-blog__text { writing-mode: vertical-rl; font-size: 10px; line-height: 16px; color: #ffffff; font-weight: 700; text-transform: uppercase; }

El botón en sí aparece después de desplazarse y es visible, pero no se puede hacer clic en él. Y todo esto es solo donde va la blog-list con una lista de artículos, si la coloca en otro lugar, entonces todo funciona y se desplaza como debería. La pregunta es cómo hacer que este botón funcione encima de todos los artículos, porque parece que los bloques de artículos pasan por encima de este botón y todo no funciona debido a esto.