Question

我希望用户自动滚动到用户刚刚在文章上发表的评论。用户通过Ajax调用提交他/她的评论。通过Javascript我检查用户是否获得成功消息。如果用户这样做，则表示他/她已正确填写所有内容。然后是时候刷新页面并跳转到他/她的评论。

网址如下：domain.com/article/#comment-73

现在我的问题是，如何通过Javascript跳转到他/她的评论？这是我目前的JS

$(function() { 
    $(document).on('click',"#send-comment-btn",function(e) {
    e.preventDefault();

        $.ajax({
            type: "POST",
            url: "/includes/db-requests/db-post-comment-on-article.php",
            data: $("#comment-recaptcha-form").serialize(),
            success: function(data,textStatus,jqXHR){   comment_on_article(data,textStatus,jqXHR);  }
        });
    });
});

function comment_on_article(data,textStatus,jqXHR) {
    alert(data);

    if (data == "comment_wrong_captcha") {
        //throw error message
    }

    if (data == "comment_finished_success") {   
        $('#comment-captcha-handler').removeClass('error-msg');
        $('#comment-captcha-handler').text('Your comment has been posted!');
        $('#comment-captcha-handler').addClass('success-msg');
        $('#comment-captcha-handler').slideDown(400);

        setTimeout(function (){
            location.reload(); //Jump to comment after reload????
            $("#comment-article-dialog").dialog( "close" );
        }, 2000);

    }
}

任何帮助将不胜感激

Answer 1

由于您说要刷新页面，您可以使用纯html执行此操作，方法是让服务器端代码为每个帖子添加锚点，如：

<a id="post_POST_ID"></a>

并附加到＆＃34;刷新＆＃34; url a #post_POST_ID
这将使浏览器跳转到左上角的锚点

Answer 2

您可以使用window.scrollTo：

// Plain javascript 1:
window.scrollTo(x, y);

// Plain javascript 2:
window.location = '#comment-72'; // #=hash, not like jQuery's ID-selector

// jQuery (animated):
$("html, body").animate({ scrollTop: x }, 1000);

// jQuery (animated) to certain element:
$("html, body").animate({ scrollTop: $('#yourElement').offset().top }, 1000);

发布后滚动发表评论

2 个答案: