2

想象一个表格，其中包含一条充满页面的消息线程 - 用户将自动向下滚动到线程的末尾和页面的底部。底部有一个文本区域，通过 ajax 和 php，在按钮单击时发送消息并附加表格。

这是执行此操作的代码：

//Call script to send message
$.ajax({
    type: 'POST',
    url: 'action/sendmessage.php',
    data: 'partner='+partner+'&message='+message,
    success: function(feedback){
        var json=$.parseJSON(feedback);
        if(json.success=='true'){
            $('#messagetext').val('');
            $('table > tbody:last').hide().after(json.message).show(200);
            $('#messagetext').focus();
        }
    }
}).error(function(){
    alert('The message could not be sent - please try again later.');
});

关于这一点的巧妙之处在于效果有效。然而，通过附加表格，用户被“推”到页面底部上方约 100 像素处——他不会停留在底部。

我该如何解决这个问题，以便在发送消息并附加表格后，用户仍然停留在页面底部？

4

2 回答 2

3

要移动到页面底部，您可以使用该scrollTop()方法。就我个人而言，我会为滚动设置动画，因为页面自行移动可能会使您的一些用户感到困惑。尝试这个：

success: function(feedback){
    var json = $.parseJSON(feedback);
    if (json.success=='true'){
        $('#messagetext').val('');
        $('table > tbody:last').hide().after(json.message).show(200);
        $('#messagetext').focus();

        // animate scrolling to bottom of the page
        $("html, body").animate({ scrollTop: $(document).height() }, 500); 

        // jump directly to the bottom of the page
        //$("html, body").scrollTop($(document).height()); 
    }
}
于 2012-09-06T12:27:06.717 回答
0

在某个地方添加此功能

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(doc.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(doc.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(doc.body.clientHeight, D.documentElement.clientHeight)
    );
}

然后将其添加到处理程序：

window.scrollTo(0, getDocHeight());

它会将页面滚动到底部。

那应该可以解决您的问题。

于 2012-09-06T12:26:23.663 回答