якорные прыжки с помощью javascript
у меня есть вопрос, который будет найден очень часто. Проблема в том, что нигде нельзя найти явного решения.
у меня две проблемы с якорями.
основной целью должно быть получить хороший чистый url без каких-либо хэшей в нем, используя якоря, чтобы перейти на страницу.
таким образом, структура якорей:
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div class="wrap">
<a name="one">text 1</a>
<a name="two">text 2</a>
<a name="three" class="box">text 3</a>
</div>
хорошо, если вы нажмете одну из ссылок, url-адрес автоматически изменится на
www.domain.com/page#1
в конце это должно быть просто:
www.domain.com/page
пока все хорошо. Теперь второе, когда вы ищете в интернете для этой проблемы, вы найдете javascript
как решение.
я нашел эту функцию:
function jumpto(anchor){
window.location.href = "#"+anchor;
}
и вызов этой функции с помощью:
<a onclick="jumpto('one');">One</a>
что будет такой же, как и раньше. Он добавит хэш к url-адресу. Я тоже добавлено
<a onclick="jumpto('one'); return false;">
без успеха. Поэтому, если есть кто-то, кто может сказать мне, как это решить, я был бы очень признателен.
Спасибо большое.
5 ответов
вы можете получить координату целевого элемента и установить для него положение прокрутки. Но это так сложно.
вот более ленивый способ сделать это:
function jump(h){
var url = location.href; //Save down the URL without hash.
location.href = "#"+h; //Go to the target element.
history.replaceState(null,null,url); //Don't like hashes. Changing it back.
}
использует replaceState
для управления url. Если вы также хотите поддержка IE, то вам придется сделать это сложно:
function jump(h){
var top = document.getElementById(h).offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there directly or some transition
}
демо:http://jsfiddle.net/DerekL/rEpPA/
Еще один w / переход: http://jsfiddle.net/DerekL/x3edvp4t/
вы также можете использовать .scrollIntoView
:
document.getElementById(h).scrollIntoView(); //Even IE6 supports this
(Ну я соврал. Это совсем не сложно.)
Я думаю, что это гораздо более простое решение:
window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"
этот метод делает не перезагружает веб-сайт и устанавливает фокус на якоря, что необходимо для чтения с экрана.
у меня есть кнопка для приглашения, что при нажатии на нее открывается диалог отображения, а затем я могу написать, что я хочу искать, и он идет в это место на странице. Он использует JavaScript для ответа на заголовок.
на .html файл у меня:
<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>
на .JS файл у меня
function myFunction() {
var input = prompt("list or new or quit");
while(input !== "quit") {
if(input ==="test100") {
window.location.hash = 'test100';
return;
// else if(input.indexOf("test100") >= 0) {
// window.location.hash = 'test100';
// return;
// }
}
}
}
когда я пишу test100 в приглашение, затем он перейдет туда, где я разместил span id="test100" в html-файле.
Я использую Google Хром.
Примечание: эта идея исходит из ссылки на той же странице с помощью
<a href="#test100">Test link</a>
который по щелчку отправит якорь. Чтобы он работал несколько раз, из опыта нужно перезагрузить страницу.
кредит людям в stackoverflow (и, возможно, stackexchange тоже) не могу вспомнить, как я собрал все кусочки. ☺
потому что когда вы делаете
window.location.href = "#"+anchor;
вы загружаете новую страницу, вы можете сделать:
<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>
<script>
function getPosition(element){
var e = document.getElementById(element);
var left = 0;
var top = 0;
do{
left += e.offsetLeft;
top += e.offsetTop;
}while(e = e.offsetParent);
return [left, top];
}
function jumpTo(id){
window.scrollTo(getPosition(id));
}
</script>
недостаточно репутации для комментария.
метод getElementById() в выбранном ответе не будет работать, если якорь имеет name
а не id
set (что не рекомендуется, но происходит в дикой природе).
что-то, что нужно иметь в виду, если у вас нет контроля над разметкой документа (например, webextension).
на location
основанный метод в выбранном ответе также может быть упрощен с помощью location.replace
:
function jump(hash) { location.replace("#" + hash) }