单击后退按钮但不离开页面时防止自动滚动？

Posted 2023-05-08

【中文标题】单击后退按钮但不离开页面时防止自动滚动？

【英文标题】：Prevent auto-scroll when klicking back button but not leaving page?

【发布时间】：2012-12-20 23:05:09

【问题描述】：

查看此页面：http://goo.gl/X3tjr

当您点击帖子时，帖子会以动画形式出现，并且 URL 哈希值会发生变化。问题是当返回时，我想要一个平滑的动画回到用户单击帖子时的相同位置。现在只是跳回原位，简直不好看。

我读到了这个问题：Prevent browser from snapping to previous scroll position when pushing back button

但我的情况有点不同，因为页面实际上并没有重新加载（哈希只是消失了）。

是否可以摆脱自动滚动？

【问题讨论】：

您可以在dev.fristil.se/sdh/wp-content/themes/sdh/theme.js$(window).hashchange(function());删除或编辑此功能

不，我绝对不想那样做。该功能只是恢复帖子（隐藏当前帖子并显示其余帖子），然后它尝试将滚动位置设置为之前的动画，但由于浏览器自动滚动动画不会做任何事。

【参考方案1】：

我向您推荐 History.js： https://github.com/browserstate/History.js/

无需重新加载即可轻松更改网址和管理页面历史记录。

很遗憾，您无法捕捉到“返回”事件，因为它不存在，但您可以捕捉到 statechange

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function() // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
);

我通常做的是捕捉用户的点击，如果没有点击就触发了状态更改，我假设用户返回。