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 に答える