如何使用swup js过渡到页面顶部
How to transition to top of the page with swup js
使用 Swup JS 我实现了一个很好的过渡效果,除了一个问题外效果很好。
如果我向下滚动到页面“A”上的某个点,点击 url 转换到页面“B”,我不会转换到页面“B”的最顶部,而是滚动点相同或接近。
如何让 swup js 不记得滚动位置并将我转移到页面顶部?
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
然后,我创建了一个分配给页面包装器的变量(这是 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 年前问过这个问题,当时我对编码的了解比现在还少,这导致我被禁止提问和回答任何问题!
使用 Swup JS 我实现了一个很好的过渡效果,除了一个问题外效果很好。
如果我向下滚动到页面“A”上的某个点,点击 url 转换到页面“B”,我不会转换到页面“B”的最顶部,而是滚动点相同或接近。
如何让 swup js 不记得滚动位置并将我转移到页面顶部?
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
然后,我创建了一个分配给页面包装器的变量(这是 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 年前问过这个问题,当时我对编码的了解比现在还少,这导致我被禁止提问和回答任何问题!