вскочить на новую страницу в SPA - PullRequest
Новая
       14

вскочить на новую страницу в SPA

0 голосов
/ 03 апреля 2019

Я делаю свое портфолио как одностраничное приложение, однако, когда я прокручиваю вниз и нажимаю на другую страницу, оно начинается не сверху, как обычный веб-сайт, а с середины страницы.Так что, если я прокручиваю вниз первую страницу и нажимаю на ссылку, которая перенаправляет меня на новую страницу, то как далеко я был на последней странице, то есть как далеко я вниз на новой странице.Как это исправить?

Я хочу, чтобы, когда я нажимаю на ссылку на новую страницу, я вскочил и начал в начале страницы.

Я понимаю, что он находится в том же 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;
}

1 Ответ

1 голос
/ 03 апреля 2019

Самое простое решение может быть добавить это 

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

к функции nav (при условии, что именно она переключает ваши страницы SPA).

...