Getting anchor's offset position

Question

I am attempting to scroll the window to a location on my page based on a user's selection. I am getting some strange results. Can anyone suggest a good/better way to go about this?

Here is what I'm working with:

 var rel = $(this).attr('rel');
 var citation = rel.split("-")[0];
 window.scrollTo(0, $('[name = ' + citation + ' ]').offset().top);
 alert($('[name = ' + citation + ' ]').offset().top);

The last alert gives me a number that seems wrong and the scrolling is not working. The following code is executed when the user clicks on a link from within the document. I am capturing that element's rel attribute value and (after a little string manipulation) using it to find the position of the corresponding anchor. The destination element's name attribute should match the rel attribute of the clicked link. See what I mean?

Thanks!

if(anchorPos != ON_DECK) { return ON_OCEAN_BOTTOM; } – Kelly S. French Jul 23 '09 at 17:26 — Kelly S. French, Jul 23 '09 at 17:26

score 3 · Answer 1 · answered Jul 27 '09 at 13:24

3

This is another easy oldschool way to scroll to a html element:

// scrolls to the element with id='citation' 

var node = document.getElementById('citation');    
node.scrollIntoView();

answered Jul 27 '09 at 13:24

port-zero

647
3
7

score 1 · Answer 2 · answered Jul 23 '09 at 17:31

1

You should be using scrollTop instead of offset since your goal is attempting to scroll the window.

answered Jul 23 '09 at 17:31

geowa4

38,872
14
87
105

score 0 · Answer 3 · answered Jul 23 '09 at 17:42

0

This code ought to work:

var rel = $(this).attr('rel');
var citation = rel.split("-")[0];
window.scrollTo(0, $('[name = ' + citation + ' ]').scrollTop());
alert($('[name = ' + citation + ' ]').scrollTop());

I would add, though, that your name selector there isn't guaranteed to be unique, in which case you'd get strange effects. IDs are meant to be unique on a page, name doesn't have to be. Just a tip.

answered Jul 23 '09 at 17:42

Gabriel Hurley

38,932
13
59
87

Agreed. I don't have control over content in this document. – Nick Jul 23 '09 at 18:38

score 0 · Answer 4 · answered Jul 27 '09 at 18:45

0

Had similar issues but the jQuery's scrollTo plugin saved my life.

answered Jul 27 '09 at 18:45

Stanislav Müller

330
2
9

score 0 · Accepted Answer · answered Jul 29 '09 at 21:23

I was able to get around this by not using offset() but by rather using jQuery's position() function.

I am just getting the returned object's "top" property. I have to use the element's text as an index value because these elements did not have unique IDs.

var citationIndex = parseInt($(this).text() - 1);
var elementOffset = $('.HwCitationsContent li:eq(' + citationIndex + ')').position().top;

Getting anchor's offset position

5 Answers5

Linked