The `app` object (with scrolltop improvement for long views)

index.html

<nav role="navigation">
  <ul>
    <li><a href="#the-default-view">the default view</a></li>
    <li><a href="#some-view">some view</a></li>
    <li><a href="#another-view">another view</a></li>
  </ul>
</nav>
<main role="main">
  <div id="some-view">
    <h1>Some view</h1>
    <p>This is one of any number of views that are reachable by linking to its <code>id</code> / hash identifier.</p>
  </div>
  <div id="another-view">
    <h1>Another view</h1>
    <p>This is one of any number of views that are reachable by linking to its <code>id</code> / hash identifier.</p>
  </div>
  <div id="the-default-view">
    <h1>The default view</h1>
    <p>This view is visible by default when the user first arrives at the app.</p>
  </div>
</main>

script.js

(function() {
    var app = {
        // routes (ie. views and their functionality) defined here
        'routes': {
            'any': {
              'rendered': function() {
                document.querySelector('html').scrollTop = 0;
                document.querySelector('body').scrollTop = 0;
              }
            },
            'some-view': {
                'rendered': function() {
                    console.log('this view is "some-view"');
                }
            },
            'another-view': {
                'rendered': function() {
                    console.log('this view is "another-view"');
                    app.routeElem.innerHTML = '<p>This javascript content overrides the static content for this view.</p>';
                    document.querySelector('body').scrollTop = 0;
                }
             }
        },
        // The default view is recorded here. A more advanced implementation
        // might query the DOM to define it on the fly
        'default': 'the-default-view',
        'routeChange': function() {
            app.routeID = location.hash.slice(1);
            app.route = app.routes[app.routeID];
            app.routeElem = document.getElementById(app.routeID);
            app.routes['any'].rendered();
            if (app.route) {
              app.route.rendered();
            }
        },
        // The function to start the app.
        'init': function() {
            window.addEventListener('hashchange', function() {
                app.routeChange();
            });
            // If there's no hash in the URL, change the URL to
            // include the default view's hash
            if (!window.location.hash) {
                window.location.hash = app.default;
            } else {
                // Execute routeChange() for the first time
                app.routeChange();
            }
        }
    };
    window.app = app;
})();

app.init();

style.css

/* basic layout */

body {
  font-size: 120%;
  font-family: sans-serif;
  max-width: 40em;
  margin: 0 auto;
}

nav {
  text-align: center;
  padding: 0.5em 0;
  border-bottom: 2px solid;
}

nav li {
  display: inline-block;
  margin: 0 0.5em;
}

/* view visibility logic and animation */

main > * {
  display: none;
  height: 2000px;
}

main > *:last-child {
  display: block;
}

@keyframes pulse {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

main > *:target {
  display: block;
  animation: pulse 0.5s linear 1;
}

main > *:target ~ * {
  display: none;
}

The `app` object (with scrolltop improvement for long views).markdown

The app object (with scrolltop improvement for long views)

The simple app object defining routes and "life cycle" like functions.

A Pen by Heydon on CodePen.

License.