浏览器持续滚动位置

Browser persistent scroll position

本文关键字:位置 滚动 浏览器      更新时间:2023-09-26

当我使用firefox并在无限滚动div中滚动并重新加载页面时,我会滚动回最后一个会话滚动位置。

这是一个实时测试页面。

该错误可以通过以下步骤重现。

第一。在firefox上加载页面
第二。点击"点击我"文本
第三。将列表向下滚动到页面中间
第四。重新加载页面"WITH"清除缓存
第五。再次点击"点击我"文本
第六。观察位置。

我知道如何通过用PHP对网站进行版本控制来解决这个问题,但我希望有其他方法。

当文档准备好时,$(this)指的是window.document,当我们执行$(this).scrollTop(0);时,它会将滚动条带到窗口对象的顶部位置。试试这样的东西:

$(document).ready(function(){
    $(this).scrollTop(0);
});

我认为你没有访问权限。

你需要给你想深度链接的每个元素一个ID,这样你就有了引用它的方法。例如:

$('#target').append('<li id="result'+i+'">Item'+i+'</li>');

滚动时将结果添加到末尾被称为无限滚动。

滚动时,您需要在url中记录#片段,或者使用history.pushState()更新url。有一些关于在这个线程中存储这些信息的两种方法的讨论:

  • 在不使用JavaScript加载新页面的情况下更改浏览器中的URL

当用户回到页面时,你应该在页面加载中这样做:

  1. 检查您是否有要滚动到的结果
  2. 加载结果数以使目标存在
  3. 使用某种平滑滚动将用户向下移动到该结果

我发现解决firefox缓存问题的唯一可能方法是"版本控制"。版本控制强制浏览器从服务器而不是缓存中获取页面。

通过为每次要刷新的url提供一个get参数,可以很容易地做到这一点。下面是一个简单的代码。

<?php
   <a href="your/url.com?v=".time()> a random text </a>
?>

此外,您还必须对目标页面进行版本控制。这也是要做的。

<?php 
   if(isset($_GET['v']) && $_GET['v']!=time()){
      header("location: your/url.com?v=".time());
   }
?>

上一个代码检查"GET"参数"v"是否已设置且不等于Now Timestamp
如果这是真的,那么Web服务器会将用户重新定位到相同的页面,但会更新参数,从而从服务器而不是缓存请求页面。

这是通过php以编程方式强制清除缓存的唯一方法。