javascript - jquery 滚动到功能不起作用

Question

我正在尝试使用 .parent、.next 和 .find 创建一个按钮来遍历我的页面，但出现错误

Uncaught TypeError: Cannot read property 'top' of undefined

html:

<div id="mainbody">
    <div class="hero-unit">
        <div class="next"></div>
    </div>
    <div class="index-block">
        <div class="next"></div>
    </div>
    <div class="index-block">
        <div class="next"></div>
    </div>
    <div class="index-block">
        <div class="next"></div>
    </div>
</div>

js:

/********************************
/ SCROLL TO NEXT
/*******************************/
$(document).ready(function(){
    $('.next').on("click", function() {
            var next;
            next = $('#mainbody').parent().next().find(".index-block");
            $('html,body').animate({ scrollTop: next.offset().top + 65}, 1000);
    });
});

Answer 1

我对您的代码进行了一些更改

HTML

<div id="mainbody">
    <div class="index-block hero-unit">
        <div class="next"></div>
    </div>
    <div class="index-block">
        <div class="next"></div>
    </div>
    <div class="index-block">
        <div class="next"></div>
    </div>
    <div class="index-block">
        <div class="next"></div>
    </div>
</div>

CSS

.hero-unit, .index-block {
    background-color: #efefef;
    margin: 5px;
    height: 200px;
    position: relative;
    width: 100%;
}

.next {
    background-color: #333;
    color: #FFF;
    height: 50px;
    width: 50px;
    position: absolute;
    bottom: 5px;
    right: 5px;    
    cursor:pointer;
}

jQuery

$(document).ready(function(){
    $('.next').on("click", function() {
        if($(this).parent().next(".index-block").offset() != undefined){
            var next = $(this).parent().next(".index-block").offset();
            $('html,body').animate({ scrollTop: next.top}, 1000);
        }   
    });
});