Hi,
I'm trying to create a JavaScript hyperlink which links to a HTML anchor. The only thing is, I'm trying to create it in SharePoint within an .aspx page...
I have a hidden table, which I unhide with a JavaScript function, but the table is at the bottom of the page, so I added an anchor next to the table and tried to hyperlink to it... but it's not working... This is my code:
function GoTo() {
window.location.hash="change"
}
<a name="change"></a>
Any ideas?
Change your window.location.hash = "change" to window.location.href = "#change"
I've tested this and this is working in IE8, Chrome, FF, Safari.
There is probably another way:
function scrollToAnchor(anchorName){
//set the hash so people can bookmark
window.location.hash = anchorName;
//scroll the anchor into view
document.getElementsByName(anchorName)[0].scrollIntoView(true);
}
If the hash method is not working try to set your window in a small size that it can jump to the hash tag
I just tried it, and it worked for me. Try adding #change to the address bar and see whether it does what you expect it to.
That's not working, Gregoire. The code is now:
function GoTo() {window.location.hash="#change"}
But it's still not working... no JavaScript errors, by the way. Any ideas?
JD-Daz -
Based on your brief spec, I created this simple test page, and it seems to work. Maybe you should do a copy and paste of your own page into a new page, and then cut stuff out until it works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript">
function GoTo() {
var myTable = document.getElementById("myTable");
myTable.style.visibility = "visible";
window.location.hash = "change";
}
</script>
</head>
<body>
<a href="javascript:GoTo();">Click Here</a><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
30<br />
<table id="myTable" border="1" width="500" style="visibility:hidden" backcolor="black">
<tr>
<td>Shown</td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
<a name="change"></a>
</body>
</html>
To solve your problem, change to button to
<input type="button" value="Request For Change" onclick="GoTo(); return false;">
The problem is that an input type="button" will submit the page when clicked. Therefore, when you click it, it scrolls down to your anchor element, but then reloads the page, defeating the purpose. You need to add return false to the end of the onclick handler to suppress the default action.
Also, onclick should be all lower case.
I think you want to use <a href="#change" onclick="unhide table code here">link text</a>.