The href=# causes the browser viewport to scroll to the top of the page every time one of these links is clicked. I'd recommend removing it. The <a> element works fine without it.

Where do you experience this? I can't reproduce it in either Chrome, Firefox or Safari. The href is necessary to inherit Observable's default link styles, but I've added a preventDefault for good measure.

Without the preventDefault it was scrolling to top of page in at least Safari and Firefox, I didn't try Chrome. (This is the expected behavior according to the spec, https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-fragid)

In a web search, someone recommended using href="#!" as a convention for a fake ID unlikely to be used on a page (and I guess kind of a cute joke to use shebang)

Todo: replace with synthetic data.