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.