0

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

$(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;
});
});

谢谢。

4

1 回答 1

0

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

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

这样做，原始容器 div 将永远不会有滚动位置，但模板文件中的新容器会有滚动位置，即 div 和滚动位置将与页面一起自动保存在浏览器历史记录中。现在，前进然后后退将保持新容器的位置，并且用户将完全位于离开页面之前的位置。

;-)

于 2012-05-24T18:04:13.757 回答