Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

157
Vistas
Scroll up on top of all blocks

I have a blog page with a list of articles, I added a scroll up button here, it appears when we scroll through the articles, but there are problems with this button. Here is my code

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;
}

The button itself appears after scrolling and is visible, but not clickable. And this is all only where the blog-list with a list of articles goes, if you place it in another place, then everything works and scrolls as it should. The question is how to make this button work on top of all articles, because it feels like article blocks go over this button and everything does not work because of this.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda