Как перейти в начало страницы с помощью swup js

Используя Swup JS, я добился хорошего эффекта перехода, который отлично работает, за исключением одной проблемы.

Если я прокручиваю вниз до определенной точки на странице "A", нажимаю URL-адрес для перехода на страницу "B", я не перехожу на самый верх страницы "B", а вместо этого точка прокрутки остается такой же или близкой.

Как я могу заставить swup js не запоминать позицию прокрутки и переводить меня в верхнюю часть страницы?

Источник

2 ответа

Решение
const options = {
    animationSelector: '[class*="transition-fade"]',
    animateHistoryBrowsing: true,
    plugins: [

        new SwupScrollPlugin({
            animateScroll: false
        })
    ]
};

const swup = new Swup(options);

let scrollValues = {};

swup.on('clickLink', () => {
    scrollValues[window.location.href] = window.scrollY;
});

swup.on('popState', () => {
    setTimeout(function() {
        window.scrollTo(0, scrollValues[window.location.href]);
    }, 100);
});
Источник

Позвольте мне сначала сказать, что я все еще немного нуб, когда дело доходит до Javascript, так что извините за мое невежество.

Однако я нашел решение (вероятно, грубое).

Я прочитал документацию на https://swup.js.org/events , и только некоторые из них имели для меня смысл. Поэтому я использовал те фрагменты, которые имели смысл, чтобы сформулировать это решение. Вот как я справился с этим; Во-первых, я использовал одно из событий swup.on, чтобы вызвать все это.

      swup.on('animationInStart', scrollToPlace); // When the incoming animation is starting we call the scroll function

Затем я создал переменную, которая была назначена назначенной оболочке страницы (это родитель контейнера подкачки, у которого был «идентификатор» подкачки);

      let pageWrapper = document.querySelector(".page-wrapper");

Затем я создаю пустой div, где я хочу, чтобы страница прокручивалась, вот так;

      <div id="need-to-scroll-here" class="anchor"></div>

Затем я создал мини-функцию, которая назначила элемент «прокрутить до» переменной, создала переменную, которая получает позицию указанного элемента из функции «getPosition», а затем сказала «pageWrapper» (определенному выше) прокрутить до должность, которую я только что получил.

          function scrollToPlace(){ 
        var myElement = document.querySelector("#need-to-scroll-here"); // Here is the element that we want to scroll to 
        var position = getPosition(myElement);     
        pageWrapper.scrollTo(0, position.y)

}

Я использовал функцию, которая находит в пикселях местоположение этого div (см. выше);

      function getPosition(el) {
var xPos = 0;
var yPos = 0;

while (el) {
if (el.tagName == "BODY") {
    // deal with browser quirks with body/window/document and page scroll
    var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
    var yScroll = el.scrollTop || document.documentElement.scrollTop;

    xPos += (el.offsetLeft - xScroll + el.clientLeft);
    yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
    // for all other non-BODY elements
    xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}

el = el.offsetParent;
}
return {
    x: xPos,
    y: yPos
};

}

Как я уже сказал, документация по-прежнему не имеет для меня особого смысла, потому что в большинстве случаев она не демонстрирует синтаксис кода на контекстно релевантных примерах, а именно так я и изучаю. Я надеюсь, что это может быть кому-то полезно, и если есть лучший способ сделать это, то, пожалуйста, поделитесь. Надеюсь, это улучшит мою оценку минус 4, и все потому, что я задал «глупый вопрос», который я задал девять лет назад, когда я знал о программировании еще меньше, чем сейчас, в результате чего мне запретили задавать любые вопросы и отвечать на них!

Источник
Другие вопросы по тегам