diff --git a/src/components/Tutorial/Assessments.vue b/src/components/Tutorial/Assessments.vue index 5168c2120..d900dea3b 100644 --- a/src/components/Tutorial/Assessments.vue +++ b/src/components/Tutorial/Assessments.vue @@ -144,7 +144,11 @@ export default { element.scrollIntoView(true); // Scroll down to display the content below the navigation bar. - window.scrollBy(0, -this.navigationBarHeight - additionalOffset); + window.scrollBy({ + top: -this.navigationBarHeight - additionalOffset, + left: 0, + behavior: 'smooth', + }); }, onSubmit() { this.$nextTick(() => { diff --git a/src/mixins/scrollToElement.js b/src/mixins/scrollToElement.js index 5ec6769a8..311d902f2 100644 --- a/src/mixins/scrollToElement.js +++ b/src/mixins/scrollToElement.js @@ -26,7 +26,11 @@ export default { element.scrollIntoView(); // if not scrolled to the bottom, use the offset if (window.scrollY + window.innerHeight < document.body.scrollHeight) { - window.scrollBy(-offset.x, -offset.y); + window.scrollBy({ + top: -offset.y, + left: -offset.x, + behavior: 'smooth', + }); } return element; }, diff --git a/src/utils/router-utils.js b/src/utils/router-utils.js index b85393bfe..43e277327 100644 --- a/src/utils/router-utils.js +++ b/src/utils/router-utils.js @@ -89,7 +89,11 @@ export async function restoreScrollOnReload() { // one tick for the page to render // a second tick for the data to be rendered await waitFrames(2); - window.scrollTo(scrollPosition.x, scrollPosition.y); + window.scrollTo({ + top: scrollPosition.y, + left: scrollPosition.x, + behavior: 'smooth', + }); } } diff --git a/src/utils/scroll-lock.js b/src/utils/scroll-lock.js index a9ac31acd..ec347eba5 100644 --- a/src/utils/scroll-lock.js +++ b/src/utils/scroll-lock.js @@ -160,7 +160,10 @@ export default { document.body.style.removeProperty('width'); // restore scrolled Y position after resetting the position property - window.scrollTo(0, Math.abs(scrolledClientY)); + window.scrollTo({ + top: Math.abs(scrolledClientY), + left: 0, + }); } isLocked = false; },