# Solved: HTML button to jump to an anchor.



## andynic

Hi,
I'm wondering if it is possible to have an jump to a particular place on a page.

What I mean is this:
If I use an anchor tag like this:
Go to Attribute List
and place below on the page (that would normally need to be scrolled to):

(here a table displaying the item attributes)
when the user clicks on "Go to Attribute List" the browser jumps down to "itemAttributes".

What I want to do is achieve the same functionality using an INPUT tag like this:

so that ????? causes a click on the button to achieve what <a href...> above does.

I'd be grateful for any ideas.
Andynic


----------



## military

I have ansver for you question:

 
when you press the button to make the transition to the place of *tests*.
More information look at the html tutorials


----------



## andynic

Hi Military,
Thanks for your reply. I tried your suggestion, but it doesn't seem to work for me. Perhaps that's because I'm programming in Perl CGI and what I am generating are simple HTML files. It is not a PHP application.

I have found a solution at: http://www.hotscripts.com/forums/javascript/5165-solved-using-javascript-jump-anchor.html
but which I needed to adapt.

Here is how I have implemented it:
1. I placed the following in the section of the html script.

2. Defined the anchor in the html page like this:


3. Defined the tag like this:

I indicate that the problem is "more or less soved" because I don't understand why I need to call the function jumpToAnchor twice, the first time with the actual anchor name and the second time with a non-existent anchr name. I have to do this becauwe if I just use the first call, the function works as it should, but if the user scrolls back to the top of the page and then clicks the "Details" button a second time, the function does not work, i.e. the browser does not jump to the anchor the second time. With the second call, the button functions all the time. Tests were performed in Safari.4.0.4.

Andynic.


----------



## tomdkat

andynic said:


> I indicate that the problem is "more or less soved" because I don't understand why I need to call the function jumpToAnchor twice, the first time with the actual anchor name and the second time with a non-existent anchr name. I have to do this becauwe if I just use the first call, the function works as it should, but if the user scrolls back to the top of the page and then clicks the "Details" button a second time, the function does not work, i.e. the browser does not jump to the anchor the second time. With the second call, the button functions all the time. Tests were performed in Safari.4.0.4.


This is because you're changing the location the browser thinks is loaded. When you click a link on a page that refers to another element on that page, the URL will have "#{name}" appended to the URL. Then if you manually scroll the page to that same link and click it again, the browser won't take you to that element again since that URL has already been loaded.

So, if my home page URL is www.mysite.com and at the bottom of the page there is a "Top of page" link that has "#top" as it's href location, when you click that link the URL will be www.mysite.com#top. Now, if I manually scroll down to the bottom of the page and click the "Top of page" link again, I won't be taken to the #top element since the URL is already www.mysite.com#top so the browser thinks it's already at the right URL.

By calling the "jumpToAnchor()" function a second time, you effectively "reset" the URL such that the button will always work the way you want.

Peace...


----------



## andynic

HI Tomkat,
Thanks very much for taking the time to post the explanation. Very clear.
Andynic


----------



## tomdkat

No problemo. 

Peace...


----------

