#114: anchor links support

src/index.js

@@ -38,7 +38,7 @@ userFactory(store)
     ReactDOM.render(
         <ReduxProvider store={store}>
             <IntlProvider>
-                <Router history={browserHistory}>
+                <Router history={browserHistory} onUpdate={restoreScroll}>
                     {routesFactory(store)}
                 </Router>
             </IntlProvider>
@@ -49,6 +49,23 @@ userFactory(store)
     document.getElementById('loader').classList.remove('is-active');
 });
 
+/**
+ * Scrolls to page's top or #anchor link, if any
+ */
+function restoreScroll() {
+    const {hash} = location;
+
+    // Push onto callback queue so it runs after the DOM is updated
+    setTimeout(() => {
+        const id = hash.replace('#', '');
+        const el = id ? document.getElementById(id) : null;
+        if (el) {
+            el.scrollIntoView();
+        } else {
+            window.scrollTo(0, 0);
+        }
+    }, 100);
+}
 
 if (process.env.NODE_ENV !== 'production') {
     // some shortcuts for testing on localhost

src/pages/rules/RulesPage.jsx

@@ -59,8 +59,9 @@ export default function RulesPage() {
     return (
         <div>
             <div className={styles.rules}>
-                {rules.map((block, key) => (
-                    <div className={styles.rulesSection} key={key}>
+                {rules.map((block, sectionIndex) => (
+                    <div className={styles.rulesSection} key={sectionIndex}>
+                        <span id={`rule-${sectionIndex + 1}`} />
                         <h2 className={styles.rulesSectionTitle}>{block.title}</h2>
 
                         <div className={styles.rulesBody}>
@@ -70,8 +71,11 @@ export default function RulesPage() {
                                 </div>
                             ) : ''}
                             <ol className={styles.rulesList}>
-                                {block.items.map((item, key) => (
-                                    <li className={styles.rulesItem} key={key}>{item}</li>
+                                {block.items.map((item, ruleIndex) => (
+                                    <li className={styles.rulesItem} key={ruleIndex}>
+                                        <span id={`rule-${sectionIndex + 1}-${ruleIndex + 1}`} />
+                                        {item}
+                                    </li>
                                 ))}
                             </ol>
                         </div>

src/routes.js

@@ -26,11 +26,6 @@ import Finish from 'components/auth/finish/Finish';
 
 import authFlow from 'services/authFlow';
 
-browserHistory.listen(() => {
-    // scroll to top on route transition
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
-});
-
 export default function routesFactory(store) {
     authFlow.setStore(store);