javascript - 为什么scrollTop没有反应？

Question

页面上的其他 jQuery 脚本工作正常，只是滚动顶部不行，我什至可以让它在 https://jsfiddle.net/ivolong/tyvusdte/ 上工作。只是不在我的网站上，该网站使用 JQuery 3.2.1。

在正文中的脚本标记之间我有:

$("#button1").click(function() {
        $('html, body').animate({
            scrollTop: $("#slide2").offset().top
        }, 3000);
    });


    $("#button2").click(function() {
        $('html, body').animate({
            scrollTop: $("#slide1").offset().top
        }, 3000);
    });

然后我有:

<div class="slide" id="slide1">

        <p id="title">Title</p>

        <div id="specialText">

            <p>Line 1.</p>
            <p>Line 2.</p>
            <p>Line 3.</p>
            <p>Line 4.</p>

        </div>

        <button class="button" id="button1">&#8595;</button>

    </div>

    <div class="slide" id="slide2">

        <p id="title">Title</p>

        <div id="text">

            <p>Line 5.</p>
            <p>Line 6.</p>
            <p>Line 7.</p>
            <p>Line 8.</p>

        </div>

        <button class="button" id="button2">&#8595;</button>

    </div>

但是点击按钮时没有响应

Answer 1

这是因为javascript代码位于html代码之上。此时，当解释 JavaScript 代码时，不会呈现任何按钮，这会导致没有附加事件处理程序。

您可以通过将 javascript 代码放置在 html 代码下来解决此问题，或者像下面提到的评论中那样正确:将您的代码包装在 jQueries document.ready 函数中，如下所示:

$(document).ready(function() {
    $("#button1").click(function() {
        $('html, body').animate({
            scrollTop: $("#slide2").offset().top
        }, 3000);
    });

    $("#button2").click(function() {
        $('html, body').animate({
            scrollTop: $("#slide1").offset().top
        }, 3000);
    });
});