Как анимировать прокрутку сверху с помощью функции onclick

Question

Как анимировать прокрутку сверху с помощью функции onclick

0

У меня есть навигационный div, который я хочу использовать для перехода к другим слайдам на моей странице html. Я хочу использовать анимацию scrollTop для анимации до каждого отдельного идентификатора разных слайдов. Я написал функцию, основанную на некоторых сообщениях 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>

<

ThatOneGuy 03 окт. 2013, в 03:41

Источник

0

Консоль выдает ошибки?
Zach Saucier 03 окт. 2013, в 00:55
0

Я думаю, что вы должны положить ; вот так onclick="navScroll('#slide8');"
CIRCLE 03 окт. 2013, в 01:00
0

я получаю смещение (...) не является функцией. и добавление; не работал
ThatOneGuy 03 окт. 2013, в 01:00
0

Мне пришлось изменить <script src = "// code.jquery.com/jquery-latest.min.js" type = "text / javascript"> <script> на <script src = " code.jquery.com/jquery- latest.min.js "type =" text / javascript "> Источники <script> говорят, что верхний скрипт должен работать. Однако я работаю на своей локальной машине, так что мне нужен этот http: из-за этого?
ThatOneGuy 03 окт. 2013, в 01:05
0

Да, всегда при ссылке на ссылку используйте http:
CIRCLE 03 окт. 2013, в 01:06

Показать ещё 3 комментария

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Я думаю, что вы должны положить ; вот так onclick="navScroll('#slide8');"
я получаю смещение (...) не является функцией. и добавление; не работал
Мне пришлось изменить <script src = "// code.jquery.com/jquery-latest.min.js" type = "text / javascript"> <script> на <script src = " code.jquery.com/jquery- latest.min.js "type =" text / javascript "> Источники <script> говорят, что верхний скрипт должен работать. Однако я работаю на своей локальной машине, так что мне нужен этот http: из-за этого?
Да, всегда при ссылке на ссылку используйте http:

ThatOneGuy · Answer 1 · 2013-10-02T22-59-00.000Z

Мне пришлось изменить

    <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>