如何使用swup js转换到页面顶部
使用Swup JS，我获得了一个很好的过渡效果，除了一个问题之外，它工作得很好。
如果我向下滚动到页面"A“上的某个点，点击url以转换到页面"B"，我不会转换到页面"B”的最上面，而是滚动到相同或关闭的位置。
我怎么才能让swup js不记得滚动的位置，并把我转到页面的顶部呢？
Stack Overflow用户
发布于 2021-03-29 20:39:05
让我先说一句，当涉及到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分的分数，这一切都是因为我问了一个九年前我问过的“愚蠢的问题”，当时我对编程的了解甚至比现在更少，这导致我被禁止提问和回答任何问题！
https://stackoverflow.com/questions/62493437
复制相似问题
腾讯云开发者
