javascript - animate scroll on click

I've managed to get the scroll working here:

but on my website it fails to work properly. Any ideas why? It's essentially the same thing. Apologies since it's really long, I'm just not sure where exactly the problem is

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=".11.1/jquery.min.js"></script>   


</body>

JS:

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

    });

some relevant (?) 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;
}

I've managed to get the scroll working here:

but on my website it fails to work properly. Any ideas why? It's essentially the same thing. Apologies since it's really long, I'm just not sure where exactly the problem is

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./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);
    });

    });

some relevant (?) 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;
}

Share Improve this question edited Dec 26, 2014 at 4:53 baao 73.4k18 gold badges150 silver badges207 bronze badges asked Dec 26, 2014 at 3:42 nachime 1,8564 gold badges16 silver badges26 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You need to call your scripts after jQuery:

<script src="http://ajax.googleapis./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./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 needs to be loaded before it can be used.

There is a very simple solution now: just use normal anchor links and add this code to your css:

html {
    scroll-behavior: smooth;
}

At the time of asking it was not available, but now it's widely supported by browsers.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - animate scroll on click - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)