Merge pull request #102 from maartenpaauw/master

Feature: smooth scrolling
andybrewer · Jul 13, 2023 · c49c098 · c49c098
2 parents 14e976a + 4eb7531
commit c49c098
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/mvp.css b/mvp.css
@@ -40,6 +40,16 @@
     }
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
 /* Layout */
 article aside {
     background: var(--color-secondary-accent);

diff --git a/mvp.html b/mvp.html
@@ -20,7 +20,7 @@
             <a href="/"><img alt="Logo" src="https://via.placeholder.com/200x70?text=Logo" height="70"></a>
             <ul>
                 <li>Menu Item 1</li>
-                <li><a href="#">Menu Item 2</a></li>
+                <li><a href="#section-1">Menu Item 2</a></li>
                 <li><a href="#">Dropdown Menu Item</a>
                     <ul>
                         <li><a href="#">Sublink with a long name</a></li>
@@ -36,7 +36,7 @@ <h1>Page Heading with <i>Italics</i> and <u>Underline</u></h1>
     </header>
     <main>
         <hr>
-        <section>
+        <section id="section-1">
             <header>
                 <h2>Section Heading</h2>
                 <p>Section Subheading</p>
@@ -148,4 +148,4 @@ <h2>Form title</h2>
     </footer>
 </body>
 
-</html>
+</html>