提交评论后如何重定向到对应动态生成的帖子位置？

这个问题很常见，刚好可以利用URL锚点和一点点前端/后端调整来解决，下面分两种方案给你参考：

方案1：利用浏览器原生锚点（最简单） #

第一步：后端重定向时带上帖子ID作为锚点 #

在处理评论提交的控制器方法里，获取到当前评论所属的post_id，然后在重定向的URL末尾加上锚点（#+post_id）：

public function storeComment(Request $request)
{
    // 1. 验证评论数据
    $validated = $request->validate([
        'content' => 'required|string',
        'post_id' => 'required|exists:posts,id', // 确保post_id有效
    ]);

    // 2. 保存评论逻辑（根据你的模型结构调整）
    Comment::create([
        'content' => $validated['content'],
        'post_id' => $validated['post_id'],
        // 补充user_id等其他必要字段
    ]);

    // 3. 重定向到首页并带上锚点
    return redirect('/#' . $validated['post_id']);
}

第二步：确保帖子div有对应的ID #

浏览器的锚点默认通过元素的id属性定位，所以你需要修改动态生成帖子的代码，给每个帖子div加上id属性（值和class保持一致即可）：

{{-- Blade循环生成帖子示例 --}}
@foreach($posts as $post)
    <div class="{{ $post->id }}" id="{{ $post->id }}">
        {{-- 帖子内容 --}}
        <h3>{{ $post->title }}</h3>
        <p>{{ $post->content }}</p>

        {{-- 评论提交表单 --}}
        <form method="POST" action="{{ route('comments.store') }}">
            @csrf
            <input type="hidden" name="post_id" value="{{ $post->id }}">
            <textarea name="content" placeholder="写下你的评论..."></textarea>
            <button type="submit">提交评论</button>
        </form>
    </div>
@endforeach

这样提交评论后，页面会自动滚动到对应ID的帖子位置，是浏览器原生行为，无需额外JS。

方案2：用JS定位（无需修改div的ID） #

如果你不想给帖子div加id，只想保留class="post_id"的设置，可以用JavaScript处理锚点定位：

第一步：后端重定向逻辑和方案1一致 #

依然在重定向时带上#post_id，比如return redirect('/#' . $validated['post_id']);

第二步：添加页面加载时的JS逻辑 #

在页面底部或你的公共JS文件中加入这段代码，页面加载完成后读取URL锚点，找到对应class的帖子并滚动过去：

document.addEventListener('DOMContentLoaded', function() {
    // 获取URL锚点（去掉前缀#）
    const targetPostId = window.location.hash.slice(1);
    
    if (targetPostId) {
        // 定位到class等于post_id的元素
        const targetPost = document.querySelector('.' + targetPostId);
        
        if (targetPost) {
            // 平滑滚动到目标元素，提升体验
            targetPost.scrollIntoView({
                behavior: 'smooth',
                block: 'start' // 让元素顶部对齐视口顶部
            });
        }
    }
});

这个方案无需修改现有div结构，纯前端就能实现定位效果。

额外优化建议 #

可以给刚评论的帖子加临时高亮，让用户更清晰地定位到目标：

// 在scrollIntoView之后添加：
targetPost.classList.add('commented-post-highlight');
// 3秒后移除高亮
setTimeout(() => {
    targetPost.classList.remove('commented-post-highlight');
}, 3000);

然后在CSS中定义高亮样式：

.commented-post-highlight {
    background-color: rgba(255, 255, 0, 0.1);
    border-left: 4px solid #ffc107;
    transition: all 0.3s ease;
}

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