当用户在帖子上添加评论时，如何防止页面滚动到顶部？

Question

我正在尝试使用 Laravel 10 制作网站，并且我为用户添加了评论选项，以便他们可以在任何帖子上发表评论，但问题是当使用在帖子上添加评论时，即使用户在第 20 篇帖子上留下评论，页面也会滚动到顶部。所以很难回到他离开的地方..

这是我添加评论的代码

 @auth
                 <div class="comment-box mt-2">
                     <form id="commentForm" action="{{ route('comments.store') }}" method="POST">
                         @csrf
                         <input type="hidden" id="post_id" name="post_id" value="{{$post->id}}">
                         <input type="hidden" id="user_id" name="user_id" value="{{ Auth::user()->id }}">
                         
                         <div class="position-relative mt-4">
                             <textarea name="content" placeholder="leave a comment" required class="form-control" style="padding-right: 30px; border-radius: 10px; height: 40px;"></textarea>
                             <button type="submit" class="position-absolute" style="border: none; background: none; right: 10px; top: 50%; transform: translateY(-50%);">
                                 <i class="fas fa-paper-plane"></i>
                             </button>
                         </div>
                     </form>
                 </div>
                 @endauth

这是脚本

<script>
    $(document).ready(function() {
        $('#commentForm').on('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission

            // Collect form data
            var formData = $(this).serialize();

            // Debugging: Log form data to ensure it is correct
            console.log('Form data:', formData);

            // Perform the AJAX request
            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val(),
                    'Accept': 'application/json'
                },
                success: function(data) {
                    // Debugging: Log the response from the server
                    console.log('Server response:', data);

                    // Handle successful form submission (e.g., display a success message)
                    // Optionally, clear the textarea or display the new comment
                },
                error: function(error) {
                    // Debugging: Log any error from the server
                    console.error('Error:', error);

                    // Handle form submission errors
                }
            });
        });
    });
</script>

我已经尝试了网上和AI的各种方法，但仍然不起作用..

Answer 1

您可以处理成功响应

在成功响应中添加此代码 var newComment =

<div class="comment"> <p>${data.content}</p> <small>Posted by: ${data.user.name}</small> </div>

; $('.comment-box').append(newComment);

                // Optionally, clear the textarea
                $('#commentForm textarea[name="content"]').val('');