How to make page scroll to back top when new content loads in an SPA?

user_14872476 0
Viewed 177

I'm using octoberCMS with Single Page Application Plugin. I've added smooth-scrollbar.js.

Everything works perfectly, except that I can't get smooth-scrollbar to scroll back to the top when a new page is loaded.

Here's the API documentation at Github

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

Please bear with me, as I'm new to this and learning :)

Thanks a lot, You'll make my day!

octobercms jquery ajax javascript
1 Answers

You can create an observer that reacts to content change. I used this nifty library, scrollTo.js for nice scrolling control. Here is an example on one of my projects. Using Jquery on method with a parent element on my page I then watch for content change.

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