якорь прыгает с помощью javascript


130

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

У меня две проблемы с якорями.

Основная цель должна заключаться в том, чтобы получить красивый чистый 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;">

безуспешно. Так что, если есть кто-то, кто может сказать мне, как решить эту проблему, я был бы очень признателен.

Большое спасибо.


Не уверен в этом, но вы можете попробовать вручную записать свойство hash после перехода. Например, установите тайм-аут в обработчике onclick, который устанавливает window.location.hash=''.
Джефф

Вы имеете в виду, что не хотите, чтобы в URL-адресе отображался # при переходе в другой раздел на той же веб-странице?
Roger Ng

2
В этом случае вам придется либо манипулировать scrollTop окна, как правило, window.scrollToлибо с помощью соответствующего помощника jQuery: stackoverflow.com/questions/6677035/jquery-scroll-to-element или stackoverflow.com/questions/500336/…
Фрэнк van Puffelen 06

@Jeff - Если да location.hash='', то #останки там.
Derek 朕 會 功夫

Не делай этого, пожалуйста. Хеши хороши при сохранении страницы в закладки.
Марко Сулла,

Ответы:


205

Вы можете получить координату целевого элемента и установить для него положение прокрутки. Но это так сложно.

Вот более ленивый способ сделать это:

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/
Еще один с переходом: http://jsfiddle.net/DerekL/x3edvp4t/

Вы также можете использовать .scrollIntoView:

document.getElementById(h).scrollIntoView();   //Even IE6 supports this

(Ну, я солгал. Это совсем несложно.)


1
Крысы !! Ссылка не работает :-( Я думал, что JS Fiddles остался там навсегда
Mawg говорит восстановить Монику

1
@Mawg По-видимому, они убрали возможность использовать add /showв конце URL-адреса.
Дерек 朕 會 功夫

12
«Даже IE6 поддерживает это» - лучший комментарий, который я когда-либо видел.
Джош

3
@Black Нет такого понятия, как элемент «jQuery». Если вы хотите получить первый элемент из своего запроса, сделайте это $(mySelector)[0].scrollIntoView().
Derek 朕 會 功夫

4
1+ для scrollIntoView. 1- за последнее упоминание.
Yay295

12

Думаю, это гораздо более простое решение:

window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

Этот метод не перезагружает веб-сайт, а устанавливает фокус на якорях, необходимых для программы чтения с экрана.


И что редко работает в IE, это работает во всех IE;)
Adam111p

5
Я закончил сwindow.location = window.location.origin + window.location.pathname + '#hash';
Alex

Это перезагрузило страницу для меня. Принятый ответ сработал, хотя я бы хотел, чтобы он был короче.
HoldOffHunger

3

Недостаточно репутации для комментария.

Метод на основе getElementById () в выбранном ответе не будет работать, если привязка установлена, nameно не idустановлена ​​(что не рекомендуется, но действительно происходит).

Что-то, о чем следует помнить, если вы не контролируете разметку документа (например, webextension).

locationМетод , основанный на выбранный ответ также может быть упрощен с location.replace:

function jump(hash) { location.replace("#" + hash) }

1

Потому что когда ты это делаешь

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>

3
Я не думаю, что добавление хешей делает его новой страницей.
Derek 朕 會 功夫

5
Это не перезагружает страницу.
Derek 朕 會 功夫

Вы правы, страница не перезагружается. Я пытаюсь использовать консоль с хромом, и значок перезагружается.
Джонатан Вукович-Трибуарет

В последней версии Firefox изменения хэша, похоже, вызывают перезагрузку iFrames (в атрибуте src). Я бы счел это ошибкой браузера, но о чем нужно знать.
Beejor

1

У меня есть кнопка для подсказки, при нажатии на которую открывается диалоговое окно отображения, а затем я могу написать, что я хочу найти, и он переходит в это место на странице. Он использует 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 Chrome.

Примечание: эта идея исходит от ссылки на той же странице с помощью

<a href="#test100">Test link</a>

который при нажатии отправит на якорь. Чтобы он работал несколько раз, по опыту нужно перезагрузить страницу.

Благодарим людей из stackoverflow (и, возможно, stackexchange тоже) не могут вспомнить, как я собрал все кусочки и кусочки. ☺

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.