Question

我尝试将smoothscroll添加到我的网站中的导航栏，这不起作用，我向下滚动导航栏不要向下我添加脚本，在身体的末尾。请告诉我，如果代码有问题，我检查代码，我什么都没发现。

＆＃13;

.navbar{
    background-color: #fff;
}

.navbar .navbar-toggle{
    font-weight: bold;
    border-color: #ddd;
}

.navbar-title p{
    color: #d1d1d1;
    font-size: 26px;
    float: left;
    margin-top: 13px;
    margin-left: 40px
}

.navbar-collapse ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #2a4982;
}

.navbar-collapse li{
    float: left;
    margin-top: 5px;
    padding-left: 100px;
}

.navbar-collapse li a{
    color: #2a4982;
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
}

.navbar-collapse li a:hover{
    transition: 0.6s;
    color: #b7b7b7;
}

＆＃13;

        <div class="navbar" role="navigation">
            <div class="navbar-title">
                <a href="#"><p>FIR</p></a>
            </div>
            <div class="collapse collapsing navbar-collapse">
                <ul>
                    <li><a href="#" class="smoothScroll">Home</a></li>
                    <li><a href="#" class="smoothScroll">ATC</a></li>
                    <li><a href="#" class="smoothScroll">Pilots</a></li>
                    <li><a href="#" class="smoothScroll">Special Operations</a></li>
                    <li><a href="#" class="smoothScroll">Contact Us</a></li>
                </ul>
            </div>
        </div>
        
        <!-- scripts -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/smoothscroll.js"></script>

＆＃13;

Answer 1

您需要为锚定位置提供ID Like

<a data-scroll href="#Home">Home</a>
...
<div id="Home">.....................</div>

然后你需要初始化Smooth Scroll

var scroll = new SmoothScroll('a[href*="#"]');

了解更多信息https://github.com/cferdinandi/smooth-scroll

Answer 2

您也可以试试这个

<a href="#mysection1" rel="relativeanchor">Section 1</a>
...
<div id="mysection1">Section 1</div>

Here attached the js fiddle link http://jsfiddle.net/francescov/4DcNH/

smoothScroll不起作用

2 个答案: