Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

160
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!