Question

我正在创建一个移动网站，在其中一个网页上我创建了一个带有三个可滚动页面的仪表板。在每个页面的右下角是一个按下按钮，按下此按钮会触发JQuery事件，并应滚动到下一页。如果你在底部，或者回到顶部。但是，第2页上的按钮不会触发滚动事件，但第1页和第3页上的按钮会触发。

这是JQuery事件;

if ($(".button-container").click(function () {
            event.preventDefault();
            var id = $(this).attr('id');
            $('html, body, scroll-container').animate({
                scrollTop: $("#" + "page" + id).offset().top
            });
        }));

JQuery找到按下按钮的id并创建一个字符串以查找要滚动到的页面的id。

以下是HTML代码：

    <div class="scroll-page" id="page1">
        <div class="field">
            <span class="fa-stack fa-4x">
                <i class="fa fa-calendar-o fa-stack-3x"></i>
                <i class="fa-stack-1x calendar-text">21</i>
                <i class="fa-stack-2x month-text">MAR</i>
            </span>
            <span><a href="#" class="button button21"><i class="fa fa-file-text-o" aria-hidden="true"></i> View latest payslip</a></span>
        </div>
        <div class="button-container" id="2">
            <a class="scroll-button" href="#">
                <i class="fa fa-arrow-down" aria-hidden="true"></i>
            </a>
        </div>
    </div>

    <div class="scroll-page" id="page2">
        <div class="button-container" id="3">
            <a class="scroll-button" href="#">
                <i class="fa fa-arrow-down" aria-hidden="true"></i>
            </a>
        </div>
    </div>

    <div class="scroll-page" id="page3">
        <div class="button-container" id="1">
            <a class="scroll-button" href="#">
                <i class="fa fa-arrow-up" aria-hidden="true"></i>
            </a>
        </div>
    </div>

</scroll-container>

提前感谢您的帮助。

Answer 1

似乎没有任何明显的错误，您是否尝试将offset（）值记录到控制台以查看它是否正确？此外，您在未通过“事件”的情况下致电event.preventDefault()。到函数，所以应该实际抛出异常。您应该用以下代码替换您的事件处理程序：

$(".button-container").click(function (event) {

JQuery滚动事件无法正常运行

1 个答案: