向上滚动每篇文章

Question

我的页面上有一个文章列表，从第二篇文章开始应该有一个向上滚动按钮。问题是如何正确地做到这一点。这是我的代码

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 代码不应该添加到文章本身，而应该单独简单地固定在正确的位置？在这里进行的最佳方式是什么？

Answer 1

这是我将如何做的一个例子

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>

如您所见，通过滚动事件侦听器，您可以知道用户何时滚动以及目前已经滚动了多少像素。在这个功能中，您可以 show/hide 按钮

向上滚动每篇文章

Scroll up for each article

javascript

laravel-blade