如何使用 swup js 切换到页面顶部答案

【问题标题】：How to transition to top of the page with swup js如何使用 swup js 切换到页面顶部
【发布时间】：2020-06-21 01:12:55
【问题描述】：

使用 Swup JS，我实现了一个不错的过渡效果，除了一个问题外，效果很好。

如果我向下滚动到页面“A”上的某个点，点击 url 转换到页面“B”，我不会转换到页面“B”的最顶部，而是滚动点相同或关闭。

如何让swup js不记得滚动位置，让我跳转到页面顶部？

【问题讨论】：

标签： javascript swup

【解决方案1】：

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);
});

【讨论】：

【解决方案2】：

首先请允许我在 Javascript 方面还是个菜鸟，所以请原谅我的无知。

但是，我确实找到了解决方案（可能是一个粗略的解决方案）。

我已阅读 https://swup.js.org/events 上的文档，但其中只有一部分对我有意义。所以我使用有意义的位来制定这个解决方案。这就是我解决它的方法；首先，我使用了一个 swup.on 事件来触发整个事件。

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

然后，我创建了一个分配给页面包装器的变量（这是具有 swup 'id' 的 swup 容器的父级）；

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 分，这一切都是因为我问了一个“愚蠢的问题”，我在 9 年前问过，当时我对编码的了解比现在还少，这导致我被禁止提问和回答任何问题！

【讨论】：