【问题标题】:Retain scroll location when navigating back from another page via browser 'back' or link back?通过浏览器“返回”或返回链接从另一个页面导航返回时保留滚动位置?
【发布时间】:2011-04-18 17:11:06
【问题描述】:

我在维护滚动条位置时遇到了一些问题。

背景
我的一个页面中有一个水平图像浏览器。它延迟加载其图像,因此它可能会滚动浏览数千张图像。当您单击每张图像时,它会将您带到一个包含放大图像和一些元数据的详细信息页面。在此页面中,您还可以按照您在滚动条中看到的相同顺序直接浏览其他详细信息页面。

编辑:澄清
有一个带有溢出的 HTML 元素的页面:自动和滚动条。这个元素的内容非常非常长。当您离开然后返回此页面时,我希望滚动条记住您上次查看的位置。

目标
我想做的是允许用户使用滚动条返回页面,而无需每次都重置到滚动条的开头。如果您使用浏览器的“后退”按钮,那么它会自动工作,但是当您使用我的明确链接返回搜索/浏览结果时,您每次都从头开始。 (此外,一旦人们从详细信息页面导航到详细信息页面几次,浏览器的“返回”按钮就会变得不那么可行。)

应避免的方法
我之前的尝试在所有将滚动条位置保留在 $_POST var 中的页面之间提交了一个表单,但是当您想使用后退按钮时,您会收到那个烦人的弹出窗口,要求您确认,所以我想远离那个.

我也不想把它放到 $_GET 对象中,因为这会通过让多个 url 指向同一个页面而扰乱页面的 SEO。

问题
您认为实现这一点的最佳方法是什么?

  • 我应该对 window.history 使用一些聪明的方法吗?
  • 是否应该将带有滚动位置的 AJAX 请求发送到将值存储在 $_SESSION 对象中的脚本?
  • 还有别的吗?

提前感谢您的建议。

-K

【问题讨论】:

  • 整件事令人困惑,如果您想保持滚动位置,为什么不制作部分并以旧方式移动到该部分?
  • 我不明白你的评论。做部分? ...像分页?
  • 所以使用页内锚标记。如果它位于具有溢出:自动的元素中,这是否有效?我不希望整个页面跳转,只是水平滚动的一个元素。
  • 应该的。不过我没有测试。

标签: php ajax navigation scroll state


【解决方案1】:

我最终使用的解决方案是在每个详细信息页面中设置一个具有唯一元素 id 的会话 var,然后在浏览页面中读取该会话 var,并使用偏移量直接滚动到上次检查的元素详情页。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-03-15
    • 1970-01-01
    • 2014-09-16
    • 2019-03-10
    • 1970-01-01
    • 2021-06-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多