Как прокрутить новую страницу вверх при загрузке при нажатии? - PullRequest
Новая
       72

Как прокрутить новую страницу вверх при загрузке при нажатии?

2 голосов
/ 25 мая 2020

Я использую barba. js для добавления новых страниц. Код должен быть помещен между div-оболочкой barba. Однако, когда я нажимаю ссылку на новую страницу, новая страница исчезает в том же месте, что и предыдущая. Поэтому, если пользователь щелкает ссылку, новая страница загружается рядом, что мне не нужно.

Как мне загрузить новую страницу вверху?

Я нашел ответ в стеке о функции scrollRestoration, но все еще не понимаю как это сделать.

Может ли кто-нибудь помочь мне скомпилировать приведенный ниже код js, добавить css или html, чтобы исправить эту проблему? 

$(window).scrollTop(0);
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}

function delay(n) {
  n = n || 2000;
  return new Promise((done) => {
    setTimeout(() => {
      done();
    }, n);
  });
}

function pageTransition() {
  var tl = gsap.timeline();

tl.to(".animate-this", {
     duration: .2,  opacity: 0, delay: 0,  y: 30,  //scale:0, delay: 0.2, 
  });
  tl.to(".animate-this", {
     duration: 0,  opacity: 0, delay: 0,  scale:0,  //scale:0, delay: 0.2, 
  });

  tl.fromTo(".loading-screen", {width: 0, left: 0}, {
    duration: 1,
    width: "100%",
    left: "0%",
    ease: "expo.inOut",
    delay: 0.3,
  });

  tl.to("#svg-1", {
    duration: 1,  opacity: 0,  y: 30, stagger: 0.4, delay: 0.2, 
  });

  tl.to(".loading-screen", {
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "expo.inOut",
    delay: 0, //CHANGE TIME HERE END TRANS
  });




  tl.set(".loading-screen", { left: "-100%", });
  tl.set("#svg-1", { opacity: 1,  y: 0 });
}



function contentAnimation() {
  var tl = gsap.timeline();
  tl.from(".animate-this",  { duration: .5, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}

$(function () {
  barba.init({
    sync: true,

    transitions: [
      {
        async leave(data) {
          const done = this.async();

          pageTransition();
          await delay(2500);
          done();
        },

        async enter(data) {
          contentAnimation();
        },

        async once(data) {
          contentAnimation();
        },
      },
    ],
  });
});

Посмотрите: https://pasteboard.co/Ja33erZ.gif

Здесь также код для проверки моей проблемы (html, css): https://codepen.io/cat999/project/editor/AEeEdg

1 Ответ

0 голосов
/ 25 мая 2020

scrollRestoration не обязательно, это можно сделать, сбросив положение прокрутки во время перехода: 

  tl.fromTo(".loading-screen", {width: 0, left: 0}, {
    duration: 1,
    width: "100%",
    left: "0%",
    ease: "expo.inOut",
    delay: 0.3,
    onComplete: function() {
      window.scrollTo(0, 0);
    }
  });

Рабочий пример здесь: https://codepen.io/durchanek/project/editor/ZWOyjE

...