Fixed anchor links in closed details when using instant loading

Author: squidfunk

material/assets/javascripts/bundle.20c9977b.min.js renamed to material/assets/javascripts/bundle.19047be9.min.js

@@ -240,7 +240,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.20c9977b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.19047be9.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/assets/javascripts/bundle.19047be9.min.js.map

@@ -25,6 +25,7 @@ import {
   filter,
   fromEvent,
   map,
+  merge,
   shareReplay,
   startWith
 } from "rxjs"
@@ -66,10 +67,17 @@ export function setLocationHash(hash: string): void {
 /**
  * Watch location hash
  *
+ * @param location$ - Location observable
+ *
  * @returns Location hash observable
  */
-export function watchLocationHash(): Observable<string> {
-  return fromEvent<HashChangeEvent>(window, "hashchange")
+export function watchLocationHash(
+  location$: Observable<URL>
+): Observable<string> {
+  return merge(
+    fromEvent<HashChangeEvent>(window, "hashchange"),
+    location$
+  )
     .pipe(
       map(getLocationHash),
       startWith(getLocationHash()),
@@ -81,10 +89,14 @@ export function watchLocationHash(): Observable<string> {
 /**
  * Watch location target
  *
+ * @param location$ - Location observable
+ *
  * @returns Location target observable
  */
-export function watchLocationTarget(): Observable<HTMLElement> {
-  return watchLocationHash()
+export function watchLocationTarget(
+  location$: Observable<URL>
+): Observable<HTMLElement> {
+  return watchLocationHash(location$)
     .pipe(
       map(id => getOptionalElement(`[id="${id}"]`)!),
       filter(el => typeof el !== "undefined")

material/assets/javascripts/bundle.20c9977b.min.js.map

@@ -127,7 +127,7 @@ document.documentElement.classList.add("js")
 /* Set up navigation observables and subjects */
 const document$ = watchDocument()
 const location$ = watchLocation()
-const target$   = watchLocationTarget()
+const target$   = watchLocationTarget(location$)
 const keyboard$ = watchKeyboard()
 
 /* Set up media observables */

material/base.html

@@ -141,7 +141,9 @@ export function setupInstantLoading(
         // We now know that we have a link to an internal page, so we prevent
         // the browser from navigation and emit the URL for instant navigation.
         // Note that this also includes anchor links, which means we need to
-        // implement anchor positioning ourselves.
+        // implement anchor positioning ourselves. The reason for this is that
+        // if we wouldn't manage anchor links as well, scroll restoration will
+        // not work correctly (e.g. following an anchor link and scrolling).
         ev.preventDefault()
         return of(new URL(el.href))
       }),
@@ -284,7 +286,7 @@ export function setupInstantLoading(
   // Intercept popstate events, e.g. when using the browser's back and forward
   // buttons, and emit new location for fetching and parsing.
   const popstate$ = fromEvent<PopStateEvent>(window, "popstate")
-  popstate$.pipe(map(() => getLocation()))
+  popstate$.pipe(map(getLocation))
     .subscribe(location$)
 
   // Intercept clicks on anchor links, and scroll document into position. As