Blade文章列表滚动置顶按钮仅首个生效及按规则显示实现咨询

• HTML规范中id属性全局唯一，你在循环里给每篇文章的按钮都加了同一个id="scrollTopButtonBlog"，document.getElementById只会匹配到DOM里第一个符合的元素，所以只有第一个按钮绑定了点击事件，其他都无效
• 按钮放在循环内部会导致重复生成多份相同功能的按钮，完全冗余，也不符合需求里“从第二篇开始显示”的规则

分两种场景可按需选择： #

方案1：每篇第二篇及之后的文章内部显示回顶按钮 #

适用于需要按钮跟随文章位置展示的需求

调整Blade模板代码 #

利用Laravel Blade循环自带的$loop变量控制只在非第一篇文章渲染按钮，用class代替重复的id

<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">
                {{-- 仅第二篇及之后的文章渲染回顶按钮 --}}
                @if (!$loop->first)
                <div class="top-button-blog-wrapper">
                    <div class="top-button-blog">
                        <div class="top-button-blog_text">To top</div>
                    </div>
                </div>
                @endif

                <h2 class="blog-article__title">{{ $article->title }}</h2>
                <span>{{ date('d F Y', strtotime($article->published_at)) }}</span>
            </div>
        </div>
    @endforeach
</div>

调整JS代码 #

批量给所有回顶按钮绑定点击事件

document.querySelectorAll('.top-button-blog').forEach(btn => {
  btn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
});

方案2：全局固定悬浮回顶按钮（更推荐） #

性能更好、交互更统一，是绝大多数网站的通用实现

调整Blade模板代码 #

把回顶按钮从循环中抽出来，全局只生成1份，加样式固定在页面合适位置

<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>
{{-- 全局回顶按钮，默认隐藏，可通过CSS调整固定位置 --}}
<div class="top-button-blog-wrapper" id="scrollTopButtonBlog" style="position: fixed; bottom: 24px; right: 24px; display: none; cursor: pointer;">
    <div class="top-button-blog">
        <div class="top-button-blog_text">To top</div>
    </div>
</div>

调整JS代码 #

增加滚动监听，滚动超过第一篇文章高度时自动显示按钮，符合“从第二篇开始显示”的需求

const scrollTopButtonBlog = document.getElementById('scrollTopButtonBlog');
// 获取第一篇文章的高度作为显隐阈值
const firstArticleHeight = document.querySelector('.blog-article').offsetHeight;

// 点击回顶逻辑
scrollTopButtonBlog.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

// 滚动监听控制按钮显隐
window.addEventListener('scroll', () => {
  scrollTopButtonBlog.style.display = window.scrollY > firstArticleHeight ? 'block' : 'none';
});

如果选用方案2，后续增减文章数量无需调整逻辑，兼容性更强；如果是单页应用场景，记得在页面销毁时移除scroll监听事件，避免内存泄漏。

内容的提问来源于stack exchange，提问作者user16978178