I'm using the following:

<form><input type=button value="Clear Answers" onClick="history.go()"></form>

to allow users to reset the page after viewing some answers with an onmousover event. (I want the answers to remain visible until the viewer chooses to reset).

Is it possible to have the page reload and scroll down to a particular anchor point? At the moment it reloads and puts the reader back at the top of the page.

Thanks in advance!

(Page is under construction, but can be viewed here - see question (1c)

I'm not sure history.go is the best way to do what you want, but since you're already using it here's what you'd likely want to do.

You can list a URL inside the parenthesis so for the page you linked to

history.go("http://www.mymusictheory.com/grade6/exercises/harmony6-harmonising-a-melody.html")

Now that won't change anything from what you're doing now, but it's the first step. What you want to do is create named anchors. Where you want the page to load find an element and give it an id.

For example say you wanted the page to reload so Chords Which Fit is at the top. Here's your code around that text.

<h2><strong>Chords Which Fit </strong></h2>

Give the h2 an id

<h2 id="top"><strong>Chords Which Fit </strong></h2>

With that done you can change the history.go like so

history.go("http://www.mymusictheory.com/grade6/exercises/harmony6-harmonising-a-melody.html#top")

Notice the #top at the end of the url.

You can have as many named anchors as you want on a page so if you decided to have more exercises on a page you could add ids to different parts of the page and then adjust the history.go method accordingly for where you want the page to reload to.

Hope that helps.

Thanks - that's exactly what I was after!

You said you don't think it's the best way to go about it - how would you do it?

Glad I could help.

Well the history.go approach is probably simpler, but I think I'd write a function that cleared the answers without refreshing the page. More of an Ajax solution though not one that would need to interact with a database unless you wanted to store things in a database for some reason.

The function would have to interact with the DOM quite a bit to hook into the specific answers and clear the content from the specific elements. Probably use document.getElementById() to hook into the specific element and then removeChild() to clear the content

Something like that anyway. It would naturally be a little more coding, but I think it would ultimately be more flexible and wouldn't require refreshing the page at all.

Hmm, just trying to implement this, and it's not working...

My code:

<p id="c1">c) Chords <img src="chords-1.jpg" alt="chords" width="605" height="180" align="top" 
	onmouseover="this.src='chords1a.png';"
	onmouseout="this.src='chords1a.png';" /></p>
   <br />

<form><input type=button value="Clear Answers" onClick="history.go('http://www.mymusictheory.com/grade6/exercises/harmony6-harmonising-a-melody.html#c1')"  />
  
</form>

here

I copied what you put exactly, and it didn't work at all. So I replaced the double quotes with single ones, and it works, but it doesn't recognise the id anchor. Have I done something wrong?

OK - found a neater solution - just changing the img with ondblclick instead works fine! Thanks anyway!

Cool. Glad you found a solution even if it wasn't mine.

Great. It really work, thank you!

THis solution reloads page directly where the viewer was entering or reading? Would be useful for the news site i am currntly building.