Get link position in a menu using jQuery

Question

I’m trying to get the position of the links in a menu and I’m not getting

<nav class="menu">      
    <ul class="nav">
        <!-- <span><a href=""><img src="cds.jgp" alt="Logo Cetec"></a></span> -->
        <li><a href="#home">Home</a></li>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="#empresa">Empresa</a></li>
        <li><a href="#clientes">Clientes</a></li>
        <li><a href="#social">Social</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#comentarios">Comentários</a></li>         
    </ul>
</nav>

Using the jQuery

$('a').click(function(){ return false; });
$('.nav li a').click(function(){
    //$('.nav li a').removeClass('active');
    //$(this).addClass('active');
    var getlink = $(this).attr("href");
    var getpos  = $(getlink).position().top;        
    console.log(getpos);
    return false;
});

Only this message appears on the console

"Uncaught Typeerror: Cannot read Property 'top' of Undefined"

Answer 1

Friend, you are passing the content of the href attribute to the jQuery selector, so it cannot locate the element.

What’s going on:

var getlink = $(this).attr("href");

The getlink variable has in it for example: http://www.example.com and when you perform:

var getpos  = $(getlink).position().top; 

The jQuery gets:

var getpos  = $('http://www.example.com').position().top; 

For this reason he cannot locate any element to receive the call function.

Just change to:

var getpos  = $(this).position().top; 

Corrected:

$('a').click(function(){ return false; });
$('.nav li a').click(function(){
    //$('.nav li a').removeClass('active');
    //$(this).addClass('active');
    var getlink = $(this).attr("href");
    var getpos  = $(this).position().top;        
    console.log(getpos);
    return false;
});

Jsfiddle example: http://jsfiddle.net/mbpcZ/

Answer 2

In the codes you presented there is no use of Jquery UI, but only Jquery.

Making a correction to the script

Original:

$('a').click(function(){ return false; });
$('.nav li a').click(function(){
    //$('.nav li a').removeClass('active');
    //$(this).addClass('active');
    var getlink = $(this).attr("href");
    var getpos  = $(getlink).position().top;        
    console.log(getpos);
    return false;
});

Suggested correction:

$(function() {
    $('.nav li a').click(function(){
        var getpos  = $(this).offset();
        console.log(getpos);
        return false;
    });
});

I removed the section

$('a').click(function(){ return false; });

The reason is that the "false" return is already set to $('.Nav li a') When applying to $('a'), all objects, even outside the menu, will return false to the click event()

Use of Event Handler

For the case of the target object being inside another object whose dimensions are larger, in order to obtain greater precision about which object was actually clicked, use the Event Handler. Example:

$(function() {
    $('.nav li a').click(function(e){
        var getpos  = $(e.target).offset();
        console.log(getpos);
        return false;
    });
});

Read the documentation: http://api.jquery.com/click/