add proper hashnav handler

Author: smastrom

src/useActive.ts

@@ -182,6 +182,31 @@ export function useActive(
 		setTargets();
 	}
 
+	function getHashId() {
+		return targets.elements.find(({ id }) => id === location.hash.slice(1))?.id;
+	}
+
+	function onHashChange(event: HashChangeEvent) {
+		if (matchMedia.value) {
+			if (!event.newURL.includes('#') && activeId.value) {
+				const prevY = getSentinel();
+
+				requestAnimationFrame(() => {
+					// If scrolled on its own reset activeId, if not keep current
+					const newY = getSentinel();
+					if (prevY !== newY) {
+						return (activeId.value = jumpToFirst ? ids.value[0] : '');
+					}
+				});
+			}
+
+			const hashId = getHashId();
+			if (hashId) {
+				activeId.value = hashId;
+			}
+		}
+	}
+
 	// Lifecycle
 
 	onMounted(async () => {
@@ -195,9 +220,10 @@ export function useActive(
 		setTargets();
 
 		window.addEventListener('resize', onResize, { passive: true });
+		window.addEventListener('hashchange', onHashChange);
 
 		if (matchMedia.value) {
-			const hashId = targets.elements.find(({ id }) => id === location.hash.slice(1))?.id;
+			const hashId = getHashId();
 			if (hashId) {
 				return (activeId.value = hashId);
 			}
@@ -210,6 +236,7 @@ export function useActive(
 
 	onBeforeUnmount(() => {
 		window.removeEventListener('resize', onResize);
+		window.removeEventListener('hashchange', onHashChange);
 	});
 
 	// Watchers
@@ -219,7 +246,7 @@ export function useActive(
 	});
 
 	watch(activeId, (newId) => {
-		if (replaceHash) {
+		if (!replaceHash) {
 			const start = jumpToFirst ? 0 : -1;
 			const newHash = `${location.pathname}${activeIndex.value > start ? `#${newId}` : ''}`;
 			history.replaceState(history.state, '', newHash);

src/useScroll.ts

@@ -84,8 +84,10 @@ export function useScroll({
 		isClick.value = false;
 	}
 
-	function onPointerDown() {
-		if (isFirefox()) {
+	function onPointerDown(event: PointerEvent) {
+		const isAnchor = (event.target as HTMLElement).tagName === 'A';
+
+		if (isFirefox() && !isAnchor) {
 			reScroll();
 			// ...and force set if canceling scroll
 			setActive({ prevY: clickY.value, isCancel: true });
@@ -138,7 +140,7 @@ export function useScroll({
 				rootEl.addEventListener('touchmove', reScroll, ONCE);
 				rootEl.addEventListener('scroll', setIdle as unknown as EventListener, ONCE);
 				rootEl.addEventListener('keydown', onSpaceBar as EventListener, ONCE);
-				rootEl.addEventListener('pointerdown', onPointerDown, ONCE);
+				rootEl.addEventListener('pointerdown', onPointerDown as EventListener, ONCE);
 			}
 
 			onCleanup(() => {
@@ -147,7 +149,7 @@ export function useScroll({
 					rootEl.removeEventListener('touchmove', reScroll);
 					rootEl.removeEventListener('scroll', setIdle as unknown as EventListener);
 					rootEl.removeEventListener('keydown', onSpaceBar as EventListener);
-					rootEl.removeEventListener('pointerdown', onPointerDown);
+					rootEl.removeEventListener('pointerdown', onPointerDown as EventListener);
 				}
 			});
 		},