在 SPA 中加载新内容时如何使页面滚动到顶部？答案

【问题标题】：How to make page scroll to back top when new content loads in an SPA?在 SPA 中加载新内容时如何使页面滚动到顶部？
【发布时间】：2021-04-17 11:31:31
【问题描述】：

我将octoberCMS 与单页应用程序插件一起使用。我添加了smooth-scrollbar.js。

一切都很完美，除了在加载新页面时我无法让平滑滚动条滚动回顶部。

这是Github 的 API 文档

<div id="my-scrollbar" data-scrollbar>
 <div id="content">
   <div id="spa-page-content">
    {% page %}
   </div>
 </div>
</div>

请多多包涵，因为我是新手，正在学习:)

非常感谢，你会让我开心的！

【问题讨论】：

您可以使用setPosition() 使页面滚动回顶部。棘手的部分是知道何时加载了内容。研究 octoberCMS 的文档，了解它是否会在页面更改/更新时公开一个事件，您可以将其挂钩

标签： javascript jquery ajax octobercms

【解决方案1】：

您可以创建一个对内容更改做出反应的观察者。我使用了这个漂亮的库 scrollTo.js 来进行漂亮的滚动控制。这是我的一个项目的一个例子。在我的页面上使用带有父元素的 Jquery on 方法，然后我会观察内容的变化。

   $('#{$section}').on('DOMSubtreeModified', function(){
        let postTitle = $('#postTitle');
        if (postTitle.length > 0) {
            $('body').scrollTo('#bms-blog', {offset: -115});
        }
    });

【讨论】：