Jquery滚动功能不工作

jquery scroll to function not working

本文关键字：工作 功能 滚动 Jquery      更新时间：2023-09-26

我试图通过使用。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);
    });
});

我对你的代码做了一些修改

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);
        }   
    });
});
相关文章：