Прыжок с якоря с помощью 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;">

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

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

Ответы

Ответ 1

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

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

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.
}

Для управления URL используется replaceState. Если вы также хотите поддержку 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

_{(Ну, я соврал. Это совсем не сложно).}

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

Потому что, когда вы делаете

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>