[SOLVED] using javascript to 'jump to anchor'

workaholic · #1 (**permalink**) 01-14-04, 12:04 PM

Does anyone know if there's a way to jump to an anchor tag in the current page using javascript?

I have a page with the anchor:

<A NAME=DETAILS>Details here</A>)

The page is built using php, and at the bottom of the page, based on some conditions, I want to jump to the anchor tag.

Thanks,

Earl

hyjacked · #2 (**permalink**) 01-14-04, 02:14 PM

I believe if you add #DETAILS to the url, it would bring you to that section, not sure how it works in php though, but it should.

You may have to end up doing a refresh to switch between tags though.

I'm not sure of another way to do this..

workaholic · #3 (**permalink**) 01-16-04, 10:51 AM

I found it..

In case anyone else is interested, the following javascript will reposition the 'view' to the named anchor tag of <A NAME="DETAIL"></A>:

window.location.hash="DETAIL";

Thanks,

Earl

ajwagner777 · #4 (**permalink**) 04-24-08, 12:53 PM

to expand on this a little bit (because I just figured it out) here is the expanded code:

In the <head> tag:

Code:

<script type="text/javascript" language="javascript">
	function moveWindow (){window.location.hash="DETAILS";}
</script>

In the <body> Tag:

Code:

<body onload="moveWindow()">

And of course the Anchor tag where you want to go:

Code:

<a name="DETAILS"></a>

msix · #5 (**permalink**) 06-13-08, 12:27 AM

How would you do it if you had a link on say page2.html but wanted it to jump to the section (anchor) on page1.html, in a div which was scrollable?

msix

TwoD · #6 (**permalink**) 06-13-08, 10:54 AM

That will probably be a pain to accomplish...
The behavior of jumping to an anchor within a scrollable element is to some extent undefined. Browsers are free to do as they wish as the standards don't mention it.

I'm not entierly sure tho, but I think the bugs show up if you have set overflow:hidden on the div you attempt to jump to. (To actually jump, just change the .href to "page1.html#anchorname"). The standards just say that the anchor should scroll into view, but not exactly how. If the div has enough content to make it bigger than its fixed dimensions, and overflow is set to hidden, there's a kind of conflict. overflow="hidden" tells the browser that the contents should be hidden, and that it should not be possible to manually scroll to it. But it doesn't say if the browser itself should be allowed to scroll there when it thinks its necessary (you do tell it to forcibly show what's been hidden and it takes the easiest route).

When jumping to an element, the browser looks for the first parent element of the anchor which it can scroll (the div) and does so. Sometimes it scrolls both the div and the page, offsetting the div contents from their original place, maybe even enough to hide parts of it behind other elements (which happened to me on a project I was recently involved in).

I don't think we found a good solution for this except removing overflow="hidden" (switched to an alternative 3-column layout which didn't require it).

kaaspertje · #7 (**permalink**) 10-17-08, 08:09 AM

Hi folks,
thanks for the tip. now i use this:

Code:

<script type="text/javascript">
function load()
{
window.location.hash="content"; 
}
</script>

over here

i want this script to run if there is no ancor in the url that the user clicked on
but when there is a anchor in the url, i want the page to jump there (like it normally would)
does anyone knows how to make the sctipt only execute when there is no anchor in the adress bar
maybe using indexOf that is looking for a # (hash) in the url?

Best,
Kaaspertje

kaaspertje · #8 (**permalink**) 10-17-08, 01:22 PM

...and after trying some more effort i found out this is the solution to my previous post:

Code:

<script type="text/javascript">
function load() {
	var urllocation = location.href; //find url parameter
	if(urllocation.indexOf("#") == -1 || urllocation.indexOf("#inhoud") > -1){
		window.location.hash="inhoud"; 
	}
}
</script>

have fun