Framework7 Starter

HTML

<script src="https://unpkg.com/framework7@3.0.0/js/framework7.js"></script>
<link rel="stylesheet" href="https://unpkg.com/framework7@3.0.0/css/framework7.css">
<div id="app">
  <div class="panel panel-left panel-cover theme-dark">
    <div class="page"></div>
  </div>
  <div class="panel panel-right panel-reveal theme-dark">
    <div class="page"></div>
  </div>
  <div class="view view-main ios-edges">
    <div class="page" data-name="home">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link panel-open" data-panel="left">Left Panel</a>
          </div>
          <div class="title sliding">My App</div>
          <div class="right">
            <a href="#" class="link panel-open" data-panel="right">Right Panel</a>
          </div>
        </div>
      </div>
      <!-- Toolbar-->
      <div class="toolbar toolbar-bottom-md">
        <div class="toolbar-inner">
          <a href="#" class="link">Left Link</a>
          <a href="#" class="link">Right Link</a>
        </div>
      </div>
      <!-- Scrollable page content-->
      <div class="page-content">
        <div class="block block-strong">
          <p>Here is your blank Framework7 app.</p>
        </div>

        <div class="block-title">Navigation</div>
        <div class="list links-list">
          <ul>
            <li><a href="/about/#scroll-here">About</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var app = new Framework7({
  root: '#app',
  theme: 'auto',
  routes: [{
    path: '/about/',
    content: `
      	<div class="page">
          <div class="navbar">
            <div class="navbar-inner sliding">
            	<div class="left">
                <a href="#" class="link back">
                  <i class="icon icon-back"></i>
                  <span class="ios-only">Back</span>
                </a>
              </div>
              <div class="title">About</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block block-strong">
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros augue, pretium nec porta vitae, rhoncus finibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ultricies sodales aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas semper urna sit amet enim iaculis, vel mollis quam bibendum. Integer ut varius enim, venenatis finibus sem. Nulla sodales scelerisque bibendum. Nulla vestibulum diam eget justo pellentesque, eu elementum nibh tincidunt.

Sed nec risus quam. Etiam quam ligula, hendrerit ut risus quis, hendrerit convallis nisl. Nunc maximus lacinia accumsan. Vestibulum non hendrerit lectus, et egestas lectus. Aliquam suscipit, velit eu consectetur eleifend, eros enim eleifend eros, eget placerat libero nibh quis nulla. Sed id facilisis felis. Aliquam vel eros magna. Pellentesque viverra ex sit amet magna porttitor, at sodales odio tristique. In non orci eget erat elementum tincidunt consectetur a dui. Maecenas ac diam vel nunc tempus consectetur sed in dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nam quis sem id lacus bibendum lacinia. Nulla facilisi. Pellentesque tempor ligula quis suscipit porta.

Etiam nec viverra dui. In sit amet ultricies magna, sit amet aliquam libero. In auctor tincidunt tortor, a pulvinar diam accumsan...