feat(ux): smooth-scroll hero CTA without updating URL hash

Add a data-scroll-to attribute to the hero 'Browse the List' anchor
and a JS handler that calls scrollIntoView instead of letting the
browser follow the href, so the URL hash is never written.
Respects prefers-reduced-motion.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen 2026-03-24 13:08:22 +08:00
parent 8e360e82b7
commit eb5b37daf5
No known key found for this signature in database
GPG Key ID: B93DE4F003C33630
2 changed files with 12 additions and 1 deletions

View File

@ -44,6 +44,17 @@ function initRevealSections() {
initRevealSections();
// Smooth scroll without hash in URL
document.querySelectorAll("[data-scroll-to]").forEach(function (link) {
link.addEventListener("click", function (e) {
var target = document.getElementById(link.dataset.scrollTo);
if (!target) return;
e.preventDefault();
var motion = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
target.scrollIntoView({ behavior: motion });
});
});
// Pause hero animations when scrolled out of view
(function () {
const hero = document.querySelector(".hero");

View File

@ -36,7 +36,7 @@
</p>
<div class="hero-actions">
<a href="#library-index" class="hero-action hero-action-primary"
<a href="#library-index" class="hero-action hero-action-primary" data-scroll-to="library-index"
>Browse the List</a
>
<a