Html Twitter引导部分滚动问题

在我正在开发的网站上，我的导航栏中有一个链接，应该会将我带到id为

关于
的部分，但是它似乎忽略了导航栏的位置，从而稍微偏离了位置。如能帮助解决此问题，将不胜感激

问题的可视化
单击之前：
点击后：

导航条码

切换导航






关于章节代码

关于我们

Vicuco代表虚拟货币转换器


事实上，我们的目标是实现简单易用的转换

它们之间的虚拟货币，以及外币


我们是一个聚合器。这意味着我们可以聚合虚拟货币

所有主要虚拟货币交易所的交易数据，按顺序排列

以显示接近实时的转换率


如果您需要购买、销售或

交换虚拟货币。




跟着我们，看看我们的网站

感谢我们的最新发展！

您使用的是固定标题，因此其他页面内容将忽略其位置和大小。解决此问题的一种方法是使用执行以下操作的小脚本：


检测导航栏的高度
在
navabar
item上单击-滚动页面，但将其从视口顶部偏移
偏移量由刚刚检测到的
navbar
高度确定

你可以看到它添加到下面

我之所以说“一种方法”，是因为有另一种方法可以偏移锚点（）


$（文档）.ready（函数（）{
$（“.navbar ul li a[href^='#']”）。on（'click'，函数（e）{
e、 预防默认值（）；
$（'html，body'）。设置动画（{
scrollTop:$（this.hash）.offset（）.top-$（'.navbar'）.height（）
}, 600);
});
});
一、二、三{
高度：1000px；
}
#一个{
背景：粉红色；
}
#两个{
背景：鲑鱼；
}
#三{
背景：轻鲑鱼；
}

切换导航






    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" rel="home" href="#" title="Virtual Currency Converter"><img style="max-width:350px; margin-top: -20px;"
                                                                                                    src="./assets/img/vicuco_brand.png"> 
                </a>
            </div>


            <div id="navbar" class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#About">About</a>
                </li>

                <li><a href="#config" id="config"><span class="glyphicon glyphicon-cog gi-2x"></span></a></li>
              </ul>
            </div><!-- nav-collapse -->

        </div>
    </nav>

        <section class="bg-primary" id="About">
        <div class="row">
            <div class="container">
                <div class="row">
                    <div class=" text-center">
                        <h2 class="section-heading" id="AboutHeader">About Us</h2>
                        <div id="AboutSubtitle">
                            <p>
                                Vicuco stands for <strong>Virtual Currency Converter</strong>. <br><br>
                                Indeed, it is our goal to allow for simple and easy conversion <br>
                                of the virtual currencies among themselves, as well as to foreign currencies. <br><br>
                                We are an aggregator. That means we aggregate virtual currency <br>
                                trading data from all major virtual currency exchanges, in order <br>
                                to show you a near real-time conversion rate. <br><br>
                                We will send you in the right direction, if you need to buy, sell, or <br>
                                exchange virtual currency.<br><br>
                            </p>
                            <p>
                                Follow us on <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/vicucodotcom">
                                <span class="fa fa-twitter fa-2x"></span></a> and check out our
                                <strong><a href="http://vicuco.com/blog/" target="_blank">blog</a></strong>
                                for our latest developments! 
                            </p>

                        </div>
                    </div>

                </div>
            </div>
        <img src="assets/img/cloud.png" id="cloud" width="25%" height="100%">

        </div>
        </section>