Question

我有一个导航div，我想用它导航到我的html页面上的不同幻灯片。我想使用animate scrollTop为不同幻灯片的每个id动画制作动画。我根据我读过的一些stackoverflow帖子编写了一个函数，并在网上找到了一个教程，但由于某些原因它不起作用。

    <!DOCTYPE HTML>
    <html>
    <head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Home - Kevin Waldmann</title>
    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"><script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/script.js"></script>
    <script>
    function navScroll(navId)
    {
        $('html, body').animate({
            scrollTop: $(navId).offset().top}, 2000);
    }
    </script>
    </head>
    <body>
    <div id="navbar">
    <div id="navList">
    <div class="navItem unselectable" onclick="navScroll('#slide1')">Home</div>
    <div class="navItem unselectable" onclick="navScroll('#slide2')">Education</div>
    <div class="navItem unselectable" onclick="navScroll('#slide3')">Work Experience</div>
    <div class="navItem unselectable" onclick="navScroll('#slide4')">Skills</div>
    <div class="navItem unselectable" onclick="navScroll('#slide5')">Links</div>
    <div class="navItem unselectable" onclick="navScroll('#slide6')">Greek Life</div>
    <div class="navItem unselectable" onclick="navScroll('#slide7')">Volunteering</div>
    <div class="navItem unselectable" onclick="navScroll('#slide8')">Contact</div>
    </div>
    </div>

    <div id="pageContent">
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide1"></div>
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide2"></div>
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide3"></div>
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide4"></div>
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide5"></div>
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide6"></div>
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide7"></div>
        <div class="contentSpace"></div>
        <div class="contentPane" id="slide8"></div>

    </div>
    </div>

    </body>
    </html>

＆LT;

Answer 1

我不得不改变

    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"><script>

到

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"><script>

如何从onclick函数动画滚动顶部

1 个答案: