javascript - 跳转到 SPA 的新页面

Question

我正在将我的投资组合制作成一个单页应用程序，但是当我向下滚动并单击另一个页面时，它不会像普通网站那样从顶部开始，而是从页面中间开始。因此，如果我向下滚动首页并单击将我重定向到新页面的链接，那么我在最后一页上的距离就是我在新页面上的距离。我该如何解决？

我想，当我点击新页面的链接时，跳转并从页面的开头开始。

我知道它在同一个 HTML 文档中所以浏览器不知道它是一个新页面，所以我必须告诉它，但是如何呢？

Javascript:

const app = {
    pages: [],
    show: new Event('show'),
    init: function(){
        app.pages = document.querySelectorAll('.page');
        app.pages.forEach((pg)=>{
            pg.addEventListener('show', app.pageShown);
        })

        document.querySelectorAll('.nav-link').forEach((link)=>{
            link.addEventListener('click', app.nav);
        })
        history.replaceState({}, 'Home', '#home');
        window.addEventListener('popstate', app.poppin);
    },
    nav: function(ev){
        ev.preventDefault();
        let currentPage = ev.target.getAttribute('data-target');
        document.querySelector('.active').classList.remove('active');
        document.getElementById(currentPage).classList.add('active');
        console.log(currentPage)
        history.pushState({}, currentPage, `#${currentPage}`);
        document.getElementById(currentPage).dispatchEvent(app.show);
    },
    pageShown: function(ev){
        console.log('Page', ev.target.id, 'just shown');
        let h1 = ev.target.querySelector('h1');
        h1.classList.add('big')
        setTimeout((h)=>{
            h.classList.remove('big');
        }, 1200, h1);
    },
    poppin: function(ev){
        console.log(location.hash, 'popstate event');
        let hash = location.hash.replace('#' ,'');
        document.querySelector('.active').classList.remove('active');
        document.getElementById(hash).classList.add('active');
        console.log(hash)
        //history.pushState({}, currentPage, `#${currentPage}`);
        document.getElementById(hash).dispatchEvent(app.show);
    }
}

document.addEventListener('DOMContentLoaded', app.init);

CSS:

.page {
    display: none;
    width: 100%;
    min-height: 100%;
    position: absolute;
}

.active {
    display: block;
}

Answer 1

最简单的解决方案可能是添加这个

document.documentElement.scrollTop = 0; // for some older browsers
window.scrollTo(0,0) // newer browsers

nav 功能(假设这是切换 SPA“页面”的功能。)