お世話になっております。

機能としては、
・コンテンツをスクロール表示
・画面下部にタブバーを配置し、「前のページ」「次のページ」等でコンテンツ内容を切り替える
このようなアプリなのですが、
タブバーが固定されずコンテンツのスクロールに付いてきてしまいます。

解決法、対処法等ご教授願います。

※該当箇所(ページ)のみの最小限のコードにしてあります。
　タブバー部分のonClick関数には、
　現在表示中のコンテンツの1つ前、1つ後のキーが動的に渡される仕組みになっています。

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script>
        ons.bootstrap();
    </script>
</head>
<body>
    <ons-page>
        <ons-toolbar>
            <div class="left">左</div><div class="center"></div><div class="right">右</div>
        </ons-toolbar>

        <!-- コンテンツ部分 ここから -->
        <div style="font-size:12pt;margin:10px;">コンテンツ2<br><br>１こんにちは。<br>ここに内容が書かれます。<br><br>２こんにちは。<br>ここに内容が書かれます。<br><br>３こんにちは。<br>ここに内容が書かれます。<br><br>４こんにちは。<br>ここに内容が書かれます。<br><br>５こんにちは。<br>ここに内容が書かれます。<br><br>６こんにちは。<br>ここに内容が書かれます。<br><br>７こんにちは。<br>ここに内容が書かれます。<br><br>８こんにちは。<br>ここに内容が書かれます。<br><br>９こんにちは。<br>ここに内容が書かれます。<br><br>１０こんにちは。<br>ここに内容が書かれます。<br><br>１１こんにちは。<br>いここに内容が書かれます。<br><br></div>
        <!-- コンテンツ部分 ここまで -->

        <ons-tabbar>
            <ons-tab label="トップ" ocClick="トップへ遷移"></ons-tab>
            <ons-tab label="前のページ" ocClick="前のコンテンツへ遷移(1)"></ons-tab>
            <ons-tab label="次のページ" ocClick="次のコンテンツへ遷移(3)"></ons-tab>
        </ons-tabbar>
    </ons-page>
</body>
</html>

追記　2016/04/01
暫定対応できたので追記します。
user13314さんのコメントから、<ons-tabbar></ons-tabbar>での実現が不可能と判断し
<a></a>タグ等やスタイルを使った方法に変更することにしました。
下記のページをほぼそのまま使わせていただき、タブバー風に画面下部に固定することに成功しました。
http://weboook.blog22.fc2.com/blog-entry-412.html

変更点
・css/style.cssファイルに上記サイトのcss部分を追記。
・index.htmlの<ons-page></ons-page>の部分を下記のように変更。(jQueryは使用せず。)

    <ons-page>
        <ons-toolbar>
            <div class="left">左</div><div class="center"></div><div class="right">右</div>
        </ons-toolbar>

        <!-- コンテンツ部分 ここから -->
        <div style="font-size:12pt;margin:10px;">コンテンツ2<br><br>１こんにちは。<br>ここに内容が書かれます。<br><br>２こんにちは。<br>ここに内容が書かれます。<br><br>３こんにちは。<br>ここに内容が書かれます。<br><br>４こんにちは。<br>ここに内容が書かれます。<br><br>５こんにちは。<br>ここに内容が書かれます。<br><br>６こんにちは。<br>ここに内容が書かれます。<br><br>７こんにちは。<br>ここに内容が書かれます。<br><br>８こんにちは。<br>ここに内容が書かれます。<br><br>９こんにちは。<br>ここに内容が書かれます。<br><br>１０こんにちは。<br>ここに内容が書かれます。<br><br>１１こんにちは。<br>いここに内容が書かれます。<br><br></div>
        <!-- コンテンツ部分 ここまで -->

        <nav id="menu-wrap">
            <ul id="menu">
                <li><a href="#" onClick="トップへ遷移">トップ</a></li>
                <li><a href="#" onClick="前のコンテンツへ遷移(1)">前のページ</a></li>
                <li><a href="#" onClick="次のコンテンツへ遷移(3)">次のページ</a></li>
            </ul>
        </nav>
    </ons-page>