返回时保存滚动位置答案

【问题标题】：Saving scroll position when coming back返回时保存滚动位置
【发布时间】：2017-09-14 07:23:13
【问题描述】：

我正在尝试保存页面的滚动位置，当我们从该页面（产品列表）转到产品，然后返回产品列表时。这种情况应该发生的唯一情况是从 prodlist 到 prod 再到 prodlist（按回）。

我的第一个想法是在 javascript 中检查历史记录中的 URL，但没有读取 history.back，它只是一个动作。

【问题讨论】：

您是否在使用某些框架进行前端开发？像 Angular 或 Vue。
您可以使用锚 ID（即
并使用 someurl.com#position 访问该页面部分，这样您就可以直接链接到您想要的页面部分。保持在mind id 在页面上的每个元素都是唯一的。您还可以实现一些平滑滚动以使其更好。

标签： javascript c# jquery browser-history umbraco-ucommerce

【解决方案1】：

您可以使用 jquery 并调用 Position 方法或。窗口上的偏移方法。并从顶部和左侧获取 x 和 y。然后将 x、y 存储到 localStorage 中。 Localstorage 对于 HTML5 来说非常简单。当用户返回旧页面时，读取 x, y from。本地存储示例：本地存储。设置项（名称，值）；本地存储。获取项目（名称）；

【讨论】：

好吧，这真的很有趣。唯一的问题是有多种方法可以访问产品，并且只有从产品列表才会发生这种情况。知道如何区分产品返回的页面吗？
如果你正在使用一些路由框架，你应该得到 routeChangeStart 事件，在该事件中你可以获得应用程序要去的路由。您可以在那里拦截特定路线。

【解决方案2】：

好的，我们找到了解决方案。显然我们已经实现了面包屑导航，所以我只是拉了中间元素（我们有 3 个），以检查用户在产品之前的位置。如果按下后退按钮，我们将保留过滤器。

因此，这里唯一要做的就是在产品列表中查询等于面包屑中中间href的产品，然后滚动顶部到product.offset().top，然后bam。

祝各位阅读本文愉快。

【讨论】：