Question

我设法让滚动工作here：

但是在我的网站上它无法正常工作。有什么想法吗？这基本上是一回事。道歉，因为它真的很长，我只是不确定问题究竟在哪里

html：

<body> 

        <div class='container'>

    <nav class='sidebar'>
        <ul>
            <li class='main'>
            <a href='#'>0</a>   
            </li>
            <li class='subset' id='first-element'>
            <a href='#'>1</a>

            </li>
            <li class='subset' id='second-element'>
            <a href='#'>2</a>   
            </li>
            <li class='subset' id='third-element'>
            <a href='#'>3</a>
            </li>
                    </ul>
    </nav>

        <div class='window-top' id='window-top'>

        <div class='section' id='first'>1</div>

        <div class='section' id='second'>2</div>
        <div class='section' id='third'>3</div>
        </div>                          

        <div class='window'>

        </div>


        </div>





    <script src='js/script.js'></script>
    <script src='js/classie.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   


</body>

JS：

$( document ).ready(function() {
    $('#first-element').on('click', function(){
        $('html, body').animate({
            scrollTop: $('#third').offset().top
        }, 500);
    });

    });

一些相关的（？）css：

.window-top{
left:25%;
float:right;
width:75%;
background-image: url('../pic/bg.png');
height:80%;
}
.section
{
height:100%;
min-width:100%;
}

#second{
background-color:blue;
}

#third{
background-color:green;
}

Answer 1

你需要在jQuery之后调用你的脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
<script src='js/script.js'></script>
<script src='js/classie.js'></script>

或者

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$( document ).ready(function() {
$('#first-element').on('click', function(){
    $('html, body').animate({
        scrollTop: $('#third').offset().top
    }, 500);
});

});

jQuery需要先加载才能使用。

点击动画滚动

1 个答案: