easyui-tabs 怎样实现内容在同一页面，滚动条滚动选项卡跟着变化，类似QQ设置功能？

Question

1、easyui-tabs 怎样实现内容在同一页面，滚动条滚动选项卡跟着变化，类似QQ设置功能
如图

2、我的代码如下

 <div id="tt" class="easyui-tabs" style="width: 900px; height: 500px; href"> 
        <div title="封面" style="padding: 10px; "  >
            <table align="center" style="width:800px;">  
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
                <tr><td>封面封面封面封面封面 </td></tr>
            </table>
        </div>
            <div title="1.版本控制" style="padding: 10px; ">
                <table>
                    <tr><td>版本控制 </td></tr>
                    <tr><td>版本控制 </td></tr>
                    <tr><td>版本控制</td></tr>
                </table>  
            </div>
            <div title="2.责任主体信息" style="padding: 10px; ">
                This is the help content.
            </div> 
    </div>
    <script type="text/javascript">
        $(function () {
            $('#tt').tabs({
                tabPosition: 'left'
            });

            var tabs = $('#tt').tabs().tabs('tabs');
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].panel('options').tab.unbind().bind('mouseenter', { index: i }, function (e) {
                    $('#tt').tabs('select', e.data.index);
                });
            }
        });
    </script>

Answer 1

右边是一整块区域，点击左边的时候相当于点击锚点，或通过js滚动到一个特定的位置，然后选项卡的话就监听滚动条位置变化而变化