jquery scroll to function not working

Question

I am trying to make a button for traversing down my page by using .parent, .next, and .find and this is getting an error

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);
    });
});

Reproduce this in JSFiddle. Also, console.log(next) variable to see what happens to it while you click. — SoEzPz
– SoEzPz, Commented Jul 23, 2015 at 16:24
Please post the complete html (it's missing element with .index-block class) or put in a jsFiddle. And you have some elements with same id (next), which can give some problems. — Ricardo Pontual
– Ricardo Pontual, Commented Jul 23, 2015 at 16:31
updated fiddle with id changed to class jsfiddle.net/93gcn633/1 — Destination Designs
– Destination Designs, Commented Jul 23, 2015 at 16:36
@RicardoPontual I'm not sure what you mean by "complete" the html. I did change the ids to classes for "next", but the hero unit is not an index-block. the idea is to have the script find the next of mainbody so even in an a different element it should work. — Destination Designs
– Destination Designs, Commented Jul 23, 2015 at 16:41

Vinod Murukesan · Accepted Answer · 2015-07-23 16:54:09Z

I have made some changes in your code

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);
        }   
    });
});

Collectives™ on Stack Overflow

jquery scroll to function not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related