Smooth scrolling is back!

danielchalmers · Feb 7, 2024 · 9b92b20 · 9b92b20
1 parent 10a4996
commit 9b92b20
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/JournalApp/Components/Pages/Worksheets/WorksheetsPage.razor b/JournalApp/Components/Pages/Worksheets/WorksheetsPage.razor
@@ -73,7 +73,7 @@
 	async Task ScrollToTop()
 	{
 		logger.LogDebug("Scrolling to top");
-		await JSRuntime.InvokeVoidAsync("scrollToAbsoluteTop");
+		await JSRuntime.InvokeVoidAsync("scrollToTopOfPage");
 	}
 
 	async Task ScrollToGroup(string key)

diff --git a/JournalApp/wwwroot/index.html b/JournalApp/wwwroot/index.html
@@ -32,12 +32,13 @@
 	<script src="_content/MudBlazor/MudBlazor.min.js"></script>
 
 	<script>
-		window.scrollToAbsoluteTop = () => {
-			document.scrollingElement.scrollTop = 0
+		window.scrollToTopOfPage = () => {
+			document.scrollingElement.scrollTo({ top: 0, behavior: 'smooth' })
 		}
 
 		window.scrollToTopOfNestedElement = (ancestorSelector, descendantSelector) => {
-			document.scrollingElement.scrollTop = document.querySelector(descendantSelector).offsetTop - document.querySelector(ancestorSelector).offsetTop
+			var elementTop = document.querySelector(descendantSelector).offsetTop - document.querySelector(ancestorSelector).offsetTop;
+			document.scrollingElement.scrollTo({ top: elementTop, behavior: 'smooth' })
 		}
 	</script>