Question

对于该主题，我已经找到了很少的答案，但是没有一个对我有用。我只是想做单击和滚动事件。导航中有一个文本div，它应该带我到网站的下一部分（一个页面的网站）。

HTML：

<body>
    <header>
        <nav>
            <div class="buttons">
                <div class="strgl"><span>HOME</span></div>
            </div>
        </nav>
    </header>
    <main>
        <div id="text">
            Some text
        </div>
    </main>
</body>

和js：

$('.strgl').click(function () {
    $('html, body').animate({
        scrollTop: $('#text').offset().top
    }, 2000);
});

谢谢！

Answer 1

您提供的代码对我来说很好用。确保在脚本中包含jQuery，然后加载javascript文件。此外，请确保在加载整个页面后加载javascript（而不是开始加载过程）。

此外，请确保有足够的空格向下滚动。（获取滚动动画）这是一个工作示例：

$('.strgl').click(function () {
    $('html, body').animate({
        scrollTop: $('#text').offset().top
    }, 2000);
});

header {
  padding-bottom: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <header>
        <nav>
            <div class="buttons">
                <div class="strgl"><span>HOME</span></div>
            </div>
        </nav>
    </header>
    <main>
        <div id="text">
            Some text
        </div>
    </main>
</body>

为什么Jquery onclick侦听器不起作用？

1 个答案: