Question

页面上的其他jQuery脚本工作正常，只是没有scrollTop，我甚至可以让它在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>

但单击按钮时它没有响应，您可以在此处看到：http://ivolong.co.uk/ExtendedProject.php

Answer 1

这是因为javascript代码高于html代码。在解释javascript代码时，没有呈现的按钮导致没有附加事件处理程序。

你可以通过在你的html代码下面放置javascript代码来解决这个问题，或者在下面提到的评论中正确地解决这个问题：将代码包装在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);
    });
});

为什么scrollTop不工作？

1 个答案: