Current location: Hot Scripts Forums » General Web Coding » JavaScript » [SOLVED] using javascript to 'jump to anchor'

[SOLVED] using javascript to 'jump to anchor'

Reply
  #1 (permalink)  
Old
New Member
 
Join Date: Jan 2004
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Question [SOLVED] using javascript to 'jump to anchor'

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
Reply With Quote

Featured Marketplace Scripts (view more)

  • Simple Forum PHP

    Simple Forum PHP script - easy to put on your website

  • File Watch

    This script monitors your website files for any changes.

  • Javascript iTunes Store …

    Instantly generate your own Customized Niche Store for Top Charting iTunes, …

  • MobileClone

    Your Own Mobile Store with AT&T, Sprint, T-Mobile, Verizon...

  #2 (permalink)  
Old
Wannabe Coder
 
Join Date: Nov 2003
Location: New Brunswick, Canada
Posts: 174
Thanks: 0
Thanked 0 Times in 0 Posts
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..
__________________
hyjacked
Reply With Quote
  #3 (permalink)  
Old
New Member
 
Join Date: Jan 2004
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Cool

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
Reply With Quote
  #4 (permalink)  
Old
New Member
 
Join Date: Feb 2008
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
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>

Last edited by ajwagner777; 04-24-08 at 11:54 AM. Reason: more info
Reply With Quote
  #5 (permalink)  
Old
New Member
 
Join Date: Jun 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Additional Question

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
Reply With Quote
  #6 (permalink)  
Old
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
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).
__________________
[W3Schools - learn all about the standards.] [QuirksMode - Browser Quirks] [MS's Online Reference Docs] [DOM in Gecko.]
Please pay attention to stickys, announcements and forum rules, thank you.
Please also remember Code Wrappers and [SOLVED] Marking, this helps everyone.
Reply With Quote
  #7 (permalink)  
Old
New Member
 
Join Date: Oct 2008
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
exceptions

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

Last edited by kaaspertje; 10-17-08 at 07:12 AM.
Reply With Quote
  #8 (permalink)  
Old
New Member
 
Join Date: Oct 2008
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
...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

Last edited by kaaspertje; 10-17-08 at 12:39 PM. Reason: script improvement
Reply With Quote
  #9 (permalink)  
Old
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
Nice job, time to mark this thread as solved?
__________________
[W3Schools - learn all about the standards.] [QuirksMode - Browser Quirks] [MS's Online Reference Docs] [DOM in Gecko.]
Please pay attention to stickys, announcements and forum rules, thank you.
Please also remember Code Wrappers and [SOLVED] Marking, this helps everyone.
Reply With Quote
  #10 (permalink)  
Old
New Member
 
Join Date: Oct 2008
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Exclamation not solved

no, the script does not work in Safari on mac osx 10.4.11. any idea why?


NOTE:
please note that you should not use the anchor id 'content' because this a conflict with javascript and does not work

Last edited by kaaspertje; 10-21-08 at 06:06 AM. Reason: added note
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Forcing a JavaScript to abort HiMyNameIs JavaScript 4 10-11-12 01:25 AM
execute php into javascript function Hagoromo PHP 3 05-23-07 02:19 AM
javascript menu covered by java applet shaisachs JavaScript 7 12-28-04 11:38 PM
Reaaly stuck about javascript over frames muratisik JavaScript 1 12-14-03 11:58 AM
php and javascript together? gamextremer2003 PHP 5 11-06-03 02:18 PM


All times are GMT -5. The time now is 06:18 AM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.