У меня вопрос, который будет встречаться очень часто. Проблема в том, что нигде нельзя найти явного решения.
У меня две проблемы с якорями.
Основная цель должна заключаться в том, чтобы получить красивый чистый 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;">
безуспешно. Так что, если есть кто-то, кто может сказать мне, как решить эту проблему, я был бы очень признателен.
Большое спасибо.
window.location.hash=''
.window.scrollTo
либо с помощью соответствующего помощника jQuery: stackoverflow.com/questions/6677035/jquery-scroll-to-element или stackoverflow.com/questions/500336/…location.hash=''
, то#
останки там.Ответы:
Вы можете получить координату целевого элемента и установить для него положение прокрутки. Но это так сложно.
Вот более ленивый способ сделать это:
Это используется
replaceState
для управления URL-адресом. Если вам также нужна поддержка IE , вам придется сделать это сложным способом :Демо: http://jsfiddle.net/DerekL/rEpPA/
Еще один с переходом: http://jsfiddle.net/DerekL/x3edvp4t/
Вы также можете использовать
.scrollIntoView
:(Ну, я солгал. Это совсем несложно.)
источник
/show
в конце URL-адреса.$(mySelector)[0].scrollIntoView()
.scrollIntoView
. 1- за последнее упоминание.Думаю, это гораздо более простое решение:
Этот метод не перезагружает веб-сайт, а устанавливает фокус на якорях, необходимых для программы чтения с экрана.
источник
window.location = window.location.origin + window.location.pathname + '#hash';
Недостаточно репутации для комментария.
Метод на основе getElementById () в выбранном ответе не будет работать, если привязка установлена,
name
но неid
установлена (что не рекомендуется, но действительно происходит).Что-то, о чем следует помнить, если вы не контролируете разметку документа (например, webextension).
location
Метод , основанный на выбранный ответ также может быть упрощен сlocation.replace
:источник
Потому что когда ты это делаешь
Вы загружаете новую страницу, вы можете:
источник
У меня есть кнопка для подсказки, при нажатии на которую открывается диалоговое окно отображения, а затем я могу написать, что я хочу найти, и он переходит в это место на странице. Он использует javascript для ответа на заголовок.
В файле .html у меня есть:
В файле .js у меня есть
Когда я напишу test100 в приглашение, он перейдет туда, где я поместил span id = "test100" в html-файле.
Я использую Google Chrome.
Примечание: эта идея исходит от ссылки на той же странице с помощью
который при нажатии отправит на якорь. Чтобы он работал несколько раз, по опыту нужно перезагрузить страницу.
Благодарим людей из stackoverflow (и, возможно, stackexchange тоже) не могут вспомнить, как я собрал все кусочки и кусочки. ☺
источник