Why my page scroll when I resize on my browser?

Question

I'm doing a dashboard and I am having a problem.

When I resize my window it scrolls by itself.

Everything is responsive but I do not understand why it scrolls.

Thanks you !

ps: I upload my site if you want check:)

https://edtmimi.000webhostapp.com/dashBoard/

Before resize

After resize

What I want

Answer 1

Update your profileScroll.js file to the code below.

When you resize your browser, the scroll position changes. Since you use this to animate and calculate the position for your pages, you need to recalculate them when resizing the window.

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

But I would make it a bit more generic:

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