4

これは私を困惑させており、非常にばかげたことをしているのではないかと心配しています。

ajax呼び出しを行うフォームがあり、成功すると（同じ）ページをリロードし、URLハッシュ/フラグメントを使用してページの下部に向かって送信されたデータにジャンプします。

window.location.href = "/this/url/#post-10";
window.location.reload();

...

<div id="post-10">...</div>

少なくともChromeでは、提供しているアンカーリンクよりも前のスクロール位置が優先されていることに気付きました-ページがリロードされ、idアンカーに正常にジャンプしますが、ページの読み込みが完了すると、スクロールがあった場所にジャンプします前のページに。

これは標準的な動作ですか？これを修正するための最良の方法は、単にページの位置を強制するonLoadか、または同様のものを使用することですか?

4

2 に答える 2

2

window.location.href = "/this/url/#post-10";は単独で機能します。ページをもう一度リロードする必要はありません。これにより、（私の知る限りでは）前のスクロール位置が優先されます。

于 2012-05-17T16:44:01.503 に答える
1

ajax を使用している場合、ページをリロードするのはなぜですか?

ラインを外すだけwindow.location.reload();

window.location.href = "/this/url/#post-10";スクロールをそのpost-10部分に持っていくのに十分です。

ところで、より良い（クールな）アプローチは、スクロール効果を使用することです。

var targetOffset = $('#post-10').offset().top ;
var scrollElem = scrollableElement('html', 'body');

$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
    // scroll is complete
      location.hash = 'post-10';
});

   // Use the first element that is "scrollable"  (cross-browser fix?)
function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
        var el = arguments[i],
        $scrollElement = $(el);
        if ($scrollElement.scrollTop()> 0) {
            return el;
        } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
                return el;
            }
        }
    }
    return [];
}
于 2012-05-17T17:17:05.890 に答える