Ajax 在哈希更改之前保存 div 的滚动位置(烧烤插件)

Question

我正在使用jquery BBQ插件来存储我的ajax哈希更改事件和历史状态。我的问题是它不会保存滚动位置，因此当我使用后退按钮时，滚动条的位置不是在哈希更改之前的位置，而是与按下后退按钮之前的像素位置相同。我已经看到这对许多人来说是一个问题，有些人提到使用 cookie，但我不知道如何使用烧烤插件做到这一点，所以感谢所有的帮助。理想情况下，我希望当页面正常导航到时，滚动位于顶部，但是当按下后退按钮时，滚动将放置在该页面上的位置。这是我的代码：

$(function(){
var cache = {
    '': $('.content')
};
$(window).bind( 'hashchange', function(e) {
    var url = $.param.fragment();
    var scroll = $('#wrapper').scrollTop();
    $( '.contentarea' ).children( ':visible' ).hide();
    if ( cache[ url ] ) {
        cache[ url ].show();
    } else {
        $( '.content-loading' ).show();
        cache[ url ] = $( '<div class="pageURL"/>' )
        .appendTo( '.contentarea' )
        .load( url, function(){
            $( '.content-loading' ).hide();
        });
    }
})
$(window).trigger( 'hashchange' );
$('#btn-back').click(function(){
    parent.history.back();
    return false;
});
});

谢谢。

Answer 1

找到了一种更简单的方法来解决问题，并获得所需的结果。

与其将内容直接加载到容器div 中

，而是在正在加载的页面的模板文件中将整个页面内容包装在其自己的容器div 中。 使其宽度和高度为 100%，使其大小与内容加载到的容器div 完全相同，并在新容器div 上启用溢出(最好在原始容器div 上将溢出设置为隐藏(。

这样做，原始容器div 永远不会有滚动位置，

但模板文件中的新容器会，这就是div 和滚动位置，它将自动与页面一起保留在浏览器历史记录中。现在，前进然后后退将保持新容器的位置，用户将完全位于页面左侧之前的位置。

;-(