Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

42
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.

7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.