navbar：单击时链接居中，整个导航栏沿w移动。它？ （w.pIC）

Question

我正在使用Bootstrap，对于html来说很苗条，而对于scss / css则是sass。 我还有.hide（）和.show（）的外部jquery文件 - 单击链接时的不同页面。

我有一个div，“。foot-scro”，其中包含所有页面链接。 （这实际上是我的导航栏）。

它在页脚中，所以当我说“中心”时，我指的是页面底部的水平中心。

它是page1-link，page2-link ... page5-link。

由于默认页面（加载网站时）是page1-link，因此颜色为黑色，其余链接为彩色：灰色。 然后，当您单击其他链接时，page1-link将变为灰色，焦点（单击）链接将为黑色。

我希望将焦点链接居中，以便导航栏本身随之移动。

e.g：

假设page1-link是焦点，因此它位于页面的中心，而其他链接位于右侧。然后用户点击page3-link。导航栏向左移动，以便page3-link现在位于中心，page1-link和page2-link位于其左侧，page4-link和page5-link位于其右侧。

http://imgur.com/daktXmJ＆lt; -diagram

的jsfiddle：

https://jsfiddle.net/hodjjajj/

CODE：

的HTML /苗条：

{% for row in rows %}
    Name: {{row.0}}<br>Age: {{row.1}}<br>
{% endfor %}

CSS / SCSS / SASS：

<div class="footer">
    <p id="copyright">
        &#169; 2016 All Rights Reserved
    </p>
    <div class="foot-scro">
        <!--(footer scroll)-->
        <div id="page1-link"> PAGE1 </div>
        <div id="page2-link"> PAGE2 </div>
        <div id="page3-link"> PAGE3 </div>
        <div id="page4-link"> PAGE4 </div>
        <div id="page5-link"> PAGE5 </div>
    </div>
</div>