Smooth scrolling is back, again!...in some areas

danielchalmers · Mar 7, 2024 · 711b5ac · 711b5ac
1 parent 814750d
commit 711b5ac
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/JournalApp/Components/Pages/MoodGrid/MoodGridPage.razor b/JournalApp/Components/Pages/MoodGrid/MoodGridPage.razor
@@ -96,14 +96,14 @@
 		}
 	}
 
-	async Task ScrollToMonth(int month)
+	async Task ScrollToMonth(int month, bool smooth = false)
 	{
-		logger.LogDebug($"Scrolling to month {month}");
+		logger.LogDebug($"Scrolling to month {month}, smooth: {smooth}");
 
-		await JSRuntime.InvokeVoidAsync("scrollToTopOfNestedElement", ".mood-grid", $"#mood-grid-month-{month}");
+        await JSRuntime.InvokeVoidAsync("scrollToTopOfNestedElement", ".page-body", $"#mood-grid-month-{month}", smooth ? "smooth" : "instant");
 	}
 
-	async Task ScrollToOpenToDate() => await ScrollToMonth(OpenToDate.Month);
+	async Task ScrollToOpenToDate() => await ScrollToMonth(OpenToDate.Month, true);
 
 	async Task HeaderClicked() => await ScrollToMonth(DateTime.Now.Month);
 

diff --git a/JournalApp/wwwroot/index.html b/JournalApp/wwwroot/index.html
@@ -33,11 +33,12 @@
 
 	<script>
 		window.scrollToAbsoluteTop = () => {
-			document.scrollingElement.scrollTop = 0
+			document.scrollingElement.scrollTo({ top: 0, behavior: 'smooth' });
 		}
 
-		window.scrollToTopOfNestedElement = (ancestorSelector, descendantSelector) => {
-			document.scrollingElement.scrollTop = document.querySelector(descendantSelector).offsetTop - document.querySelector(ancestorSelector).offsetTop
+		window.scrollToTopOfNestedElement = (ancestorSelector, descendantSelector, scrollBehavior = 'smooth') => {
+			var elementTop = document.querySelector(descendantSelector).offsetTop - document.querySelector(ancestorSelector).offsetTop;
+			document.scrollingElement.scrollTo({ top: elementTop, behavior: scrollBehavior });
 		}
 	</script>