我的页面上有一个文章列表，从第二篇文章开始应该有一个向上滚动按钮。问题是如何正确地做这件事。这是我的代码
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">
//Scroll up
<div class="top-button-blog-wrapper">
<div id="scrollTopButtonBlog" class="top-button-blog">
<div class="top-button-blog_text">To top</div>
</div>
</div>
<h2 class="blog-article__title">{{ $article->title }}</h2>
<span>{{ date('d F Y', strtotime($article->published_at)) }}</span>
</div>
</div>
@endforeach
</div>
js
//Scroll up
const scrollTopButtonBlog = document.getElementById('scrollTopButtonBlog');
scrollTopButtonBlog.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
});
现在我的代码为每个新博客添加了一个滚动按钮，但它只适用于第一个，也许这个Scroll up代码不应该添加到文章本身，但单独和简单地固定在正确的地方?接下来最好的方法是什么?
下面是我如何做的一个例子
const scrollTopButton = document.getElementById("scrollTopButton");
document.addEventListener('scroll', function(e) {
if(window.scrollY > 100) {
// Removing inline style to reset the display property to what's set in stylesheet
scrollTopButton.style.opacity = "1";
} else {
// Hiding the button with inline style
scrollTopButton.style.opacity = "0";
}
});
scrollTopButton.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
});#scrollable {
overflow:auto;
}
#firstDiv {
background-color: green;
height: 1500px;
}
#scrollTopButton {
transition: opacity 0.5s;
cursor: pointer;
width: 100px;
height: 15px;
display: flex;
align-items: center;
justify-content: center;
background-color: red;
padding: 5px;
position: fixed;
bottom: 5px;
left: 15px;
}<div id="scrollable">
<div id="firstDiv"></div>
<div id="scrollTopButton" style="opacity: 0">ScrollTop</div>
</div>