【问题标题】:Prevent browser from snapping to previous scroll position when pushing back button按下后退按钮时防止浏览器捕捉到先前的滚动位置
【发布时间】:2012-07-16 20:37:26
【问题描述】:

当用户按下这样的后退按钮时,我需要防止浏览器捕捉到之前的滚动位置:

<a href="javascript:history.go(-1)"
      onClick="javascript:history.go(-1)" title="< GO BACK"></a>

按下该按钮后,浏览器将返回到此页面上的上一个滚动位置 我想停止这种行为,只加载页面顶部。

希望有人知道正确的解决方案。

-示例-

打开一个页面向下滚动到一个新页面并点击返回按钮页面将自动向下滚动到您之前滚动的位置!

【问题讨论】:

  • 看起来您正在使用锚点滚动。如果您想实现您的目标,请删除锚名称并使用 JavaScript 的 scrollTo(或类似)函数滚动到它们。
  • 不,事实并非如此!只需打开一个页面向下滚动到一个新页面并点击返回按钮页面将自动向下滚动到您之前滚动的位置!

标签: javascript html browser browser-history


【解决方案1】:

我相当肯定您所描述的行为最好归类为被认为是用户偏好的行为之一。 (其中一件你不想篡改的东西)

@mrtsherman 提出了一个hack/workaround for this,但除非它严重破坏了您的 web 应用程序的可用性,否则我认为您应该让浏览器按照用户通常期望的方式运行(并滚动到他们在浏览时所处的位置离开页面)。如果您使用它,请务必为 mrtsherman 的 js 甜心点赞。

【讨论】:

  • 非常感谢您在我考虑将其用于某些页面之前没有看到黑客攻击
【解决方案2】:

我有同样的问题,我还没有找到正确的解决方案,
但我可以给你一个很好的解决这个问题的方法。

只需滚动到顶部加载下一页。
当用户点击返回时,浏览器会滚动到顶部。

示例:

首页:
&lt;a href="page2.htm" onclick="window.scrollTo(0, 0);"&gt;Next&lt;/a&gt;

第二页:
&lt;a href="page1.htm" onclick="history.go(-1); return false;"&gt;Back&lt;/a&gt;

请注意,href="page1.htm" 仅在用户选择在新窗口/标签中打开时才会加载

对不起,我的英语。我希望这会有所帮助。

【讨论】:

    【解决方案3】:

    我找到了更好的解决方案!

    在每一页上放上以下代码:

    <script>
      setTimeout('window.scrollTo(0, 0);', 1);
    </script>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-06-26
      • 1970-01-01
      • 2013-01-11
      • 2015-10-22
      • 2011-10-15
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多