CODEWITHSUNDEEP
javascriptjquery
LAKSHMI
LAKSHMI

Reputation: 51

Cannot read property 'top' of undefined in jQuery

I just developed a website with scrolling effect using jQuery. When I'm clicking on the menu item, it should scroll down and display the section. When I click on the particular menu, it scrolls down. But in the url, I'm getting www.example.com/#menuitem_name. The particular section is not active.

This is my jQuery file:

$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 80
})

$('a.page-scroll').bind('click', function(event) {
    var link = $(this);
    $('html, body').stop().animate({
        scrollTop: $(link.attr('href')).offset().top - 70
    }, 500);
    event.preventDefault();
});

});

HTML

<section id="beta1.0" class="container">Hi</section>
<li><a class="page-scroll" href="#beta1.0">Beta1.0</a> hi</li>

Upvotes: 0

Views: 59

Answers (2)

Ganesh Yadav
Ganesh Yadav

Reputation: 2685

I agree with @Quentin answer.

It is causing problem because of beta1.0
If You just remove .0 or just dot. it works fine.

Find jsfiddle demo

$(function(){
/*
$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 80
});
*/

$('a.page-scroll').bind('click', function(event) {
    var link = $(this);
    $('html, body').stop().animate({
        scrollTop: $(link.attr('href')).offset().top - 70
    }, 500);
    event.preventDefault();
});

});

Upvotes: 0

Quentin
Quentin

Reputation: 943635

Your selector looks like this: #beta1.0

That means "An element with the id beta and the class 0" (or would if you could have a 0 immediately after a . in a selector).

You need to escape the ..

link.attr('href').replace(".", "\\.", "g")

Upvotes: 1

Related Questions