Ajax在hashchange之前保存div的滚动位置（BBQ插件）答案

【问题标题】：Ajax save scroll position of div before hashchange (BBQ Plugin)Ajax在hashchange之前保存div的滚动位置（BBQ插件）
【发布时间】：2013-02-13 16:52:13
【问题描述】：

我正在为我的 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;
});
});

谢谢。

【问题讨论】：

jQuery BBQ 不会为您执行此操作，因为它不会传递任何数据。正如建议的那样，需要做的是使用cookies。创建和使用 cookie 非常简单； I found a great article that sums up everything you need to know。您将需要编写自己的 JS 代码来确定浏览器的位置以及历史记录的距离。但是您可以通过在页面中添加 ID 并将该值写入 cookie，然后进行比较来做到这一点；如果为真，则滚动顶部（cookie_position）。格鲁克。

标签： jquery ajax cookies jquery-bbq

【解决方案1】：

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

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

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

;-)

【讨论】：