TA貢獻1775條經驗 獲得超11個贊
將您的 profileScroll.js 文件更新為以下代碼。
當您調整瀏覽器大小時，滾動位置會發生變化。由于您使用它來制作動畫并計算頁面的位置，因此在調整窗口大小時需要重新計算它們。
window.addEventListener('load', function () {
var delayInMilliseconds = 1;
function updateScrollPosition() {
if (window.scrollY != document.getElementById("homePage").offsetTop || window.scrollX != document.getElementById("homePage").offsetLeft) {
window.scroll(document.getElementById("homePage").offsetLeft, document.getElementById("homePage").offsetTop);
} else {
document.documentElement.style.animationFillMode = "forwards";
document.documentElement.style.animationDelay = "1s";
}
document.documentElement.style.scrollBehavior = "smooth";
}
setTimeout(function () {
updateScrollPosition();
}, delayInMilliseconds);
document.getElementById("profileButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("profilePage").offsetLeft, document.getElementById("profilePage").offsetTop);
});
for (i = 0; i < document.getElementsByClassName("returnToHomePage").length; i++) {
document.getElementsByClassName("returnToHomePage")[i].addEventListener("click", function () {
window.scrollTo(document.getElementById("homePage").offsetLeft, document.getElementById("homePage").offsetTop);
});
}
document.getElementById("mailButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("mailPage").offsetLeft, document.getElementById("mailPage").offsetTop);
});
document.getElementById("noteButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("notePage").offsetLeft, document.getElementById("notePage").offsetTop);
});
document.getElementById("gameButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("gamePage").offsetLeft, document.getElementById("gamePage").offsetTop);
});
document.getElementById("calendarButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("calendarPage").offsetLeft, document.getElementById("calendarPage").offsetTop);
});
document.getElementById("voiceButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("voicePage").offsetLeft, document.getElementById("voicePage").offsetTop);
});
document.getElementById("buyButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("buyPage").offsetLeft, document.getElementById("buyPage").offsetTop);
});
document.getElementById("paramsButton").addEventListener("click", function () {
window.scrollTo(document.getElementById("paramsPage").offsetLeft, document.getElementById("paramsPage").offsetTop);
});
window.addEventListener('resize', function(){
updateScrollPosition();
});
});
但我會讓它更通用一些：
window.addEventListener('load', function() {
const delayInMilliseconds = 1;
let currentPageId = 'homePage';
function scrollToPage(pageId) {
currentPageId = pageId;
window.scrollTo(document.getElementById(pageId).offsetLeft, document.getElementById(pageId).offsetTop);
}
setTimeout(function() {
document.documentElement.style.animationFillMode = 'forwards';
document.documentElement.style.animationDelay = '1s';
document.documentElement.style.scrollBehavior = 'smooth';
scrollToPage(currentPageId);
}, delayInMilliseconds);
let actions = [
{ buttonId: 'profileButton', pageId: 'profilePage' },
{ buttonId: 'mailButton', pageId: 'mailPage' },
{ buttonId: 'noteButton', pageId: 'noteButton' },
{ buttonId: 'gameButton', pageId: 'gamePage' },
{ buttonId: 'calendarButton', pageId: 'calendarPage' },
{ buttonId: 'voiceButton', pageId: 'voicePage' },
{ buttonId: 'buyButton', pageId: 'buyPage' },
{ buttonId: 'paramsButton', pageId: 'paramsPage' },
];
// Make sure you use `let` instead of `var`. The scope of `var` is global.
for (let i = 0; i < actions.length; i++) {
document.getElementById(actions[i].buttonId).addEventListener('click', function() {
scrollToPage(actions[i]);
});
}
// Check all document clicks, if the target has the class 'returnToHomePage' go back to home page.
// This way you don't have to loop over the buttons
document.addEventListener('click', function(event) {
if (event.target.classList.contains('returnToHomePage')) {
scrollToPage('homePage');
}
});
window.addEventListener('resize', function() {
scrollToPage(currentPageId);
});
});
舉報