Перейти на якорь с помощью JavaScript - PullRequest
Новая
       17

Перейти на якорь с помощью JavaScript

0 голосов
/ 26 ноября 2009

Я пытаюсь создать функцию в JavaScript, которая приведет пользователя к привязке HTML. Единственное, я пытаюсь создать его в SharePoint на странице ASPX ...

У меня есть скрытая таблица, которую я показываю с помощью функции JavaScript, но эта таблица находится внизу страницы, поэтому я добавил якорь рядом с таблицей и попытался сделать гиперссылку на нее ... но она не работает ... это мой код: 

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

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

Есть идеи?

Ответы [ 5 ]

0 голосов
/ 27 ноября 2009

Я думаю, что вы хотите использовать <a href="#change" onclick="unhide table code here">link text</a>.

0 голосов
/ 26 ноября 2009

Чтобы решить вашу проблему, измените на кнопку 

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

Проблема в том, что input type="button" отправит страницу при нажатии.Поэтому, когда вы щелкаете по нему, он прокручивается вниз к вашему элементу привязки, но затем перезагружает страницу, отказываясь от цели.Вам нужно добавить return false в конец обработчика onclick для подавления действия по умолчанию.

Кроме того, onclick должно быть все в нижнем регистре.

0 голосов
/ 26 ноября 2009

Я только что попробовал, и это сработало для меня. Попробуйте добавить #change в адресную строку и посмотрите, соответствует ли она ожиданиям.

0 голосов
/ 26 ноября 2009

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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
</table>
<a name="change"></a>
</body>
</html>
0 голосов
/ 26 ноября 2009

Измените 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);
}

Если метод хеширования не работает, попробуйте установить ваше окно небольшого размера, чтобы оно могло перейти к хеш-тегу

...