通过 javascript 转到锚点

发布于 2024-08-12 18:20:54 字数 313 浏览 3 评论 0原文

我正在尝试在 JavaScript 中创建一个函数，它将把用户带到 HTML 锚点。唯一的问题是，我正在尝试在 SharePoint 中的 .aspx 页面中创建它...

我有一个隐藏表，我使用 JavaScript 函数取消隐藏该表，但该表位于页面底部，所以我添加了桌子旁边的锚并尝试超链接到它...但它不起作用...这是我的代码：

function GoTo() {
    window.location.hash="change"
}

<a name="change"></a>

有什么想法吗？

原文

I'm trying to create a function in JavaScript which will take the user 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花心好男孩 2024-08-19 18:20:54

我刚刚尝试过，它对我有用。尝试将 #change 添加到地址栏，看看它是否符合您的预期。

回复收藏 0 原文

灼痛 2024-08-19 18:20:54

JD-Daz -

根据您的简短规范，我创建了这个简单的测试页面，它似乎有效。也许您应该将自己的页面复制并粘贴到新页面中，然后剪切内容直到其正常工作：

<!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>

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>

回复收藏 0 原文

黑凤梨 2024-08-19 18:20:54

要解决您的问题，请将按钮更改为

<input type="button" value="Request For Change" onclick="GoTo(); return false;">

问题是 input type="button" 将在单击时提交页面。因此，当您单击它时，它会向下滚动到您的锚元素，但随后会重新加载页面，从而达不到目的。您需要将 return false 添加到 onclick 处理程序的末尾以抑制默认操作。

另外，onclick 应该全部小写。

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.

回复收藏 0 原文

和我恋爱吧 2024-08-19 18:20:54

我认为您想使用 link text。

回复收藏 0 原文

紙鸢 2024-08-19 18:20:54

将 window.location.hash = "change" 更改为 window.location.href = "#change"
我已经测试过了，它可以在 IE8、Chrome、FF、Safari 中运行。

可能还有另一种方法：

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);
}

如果哈希方法不起作用，请尝试将窗口设置为较小的尺寸，以便它可以跳转到哈希标签

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

回复收藏 0 原文

~没有更多了~