在ajax成功方法后链接到一个元素

Link to an element after in ajax success method

本文关键字:一个 元素 成功 ajax 方法 链接      更新时间:2023-09-26

所以我做了一个ajax请求我的表单。它将信息存储在数据库中,然后隐藏表单并显示一条感谢消息。但是,我需要浏览器快速响应新的感谢信息。

就像在普通页面上一样你可以这样做:

<a href="www.mywebsite.com/#test"></a>
<div id="test"></div>

如果你点击那个链接它就会把你固定到元素上

我如何在我的ajax成功方法自动做到这一点?

类似这样的代码应该可以达到这个效果:

var messagePos = $("#test").offset();
window.scrollTo(0, messagePos.top);

offset()函数获取元素相对于文档的位置。然后window.scrollTo()函数移动到文档中指定的x和y位置。在本例中,x为0,y为消息div的顶部。

基本上,在成功回调中你需要有这样的东西:

$.ajax({
    // ...
    success: function() {
        $('html, body').animate({
            scrollTop: $("#thankyou").offset().top
        }, 0);
    }
});

如果你想让它平滑,你只需将0更改为500(半秒)。