跳上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“页面”的那个。）