стрибки з якоря за допомогою 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;">

без успіху. Тож якщо є хтось, хто міг би сказати мені, як вирішити це, я дуже вдячний.

Дуже дякую.

Ви можете отримати координату цільового елемента і встановити на нього положення прокрутки. Але це так складно.

Ось такий лазерний спосіб зробити це:

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

_{(Ну я збрехав. Це зовсім не складно.)}

Я думаю, що це набагато простіше рішення:

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

Цей метод не перезавантажує веб-сайт, а встановлює фокус на якорях, необхідних для зчитування екрана.

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

Метод на основі getElementById () у вибраній відповіді не працюватиме, якщо якір є, nameале не idвстановлений (що не рекомендується, але в дикій природі відбувається).

Щось майте на увазі, якщо ви не маєте контролю над розміткою документа (наприклад, webextension).

На locationоснові методу у вибраній відповіді також можна спростити location.replace:

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

Бо коли ти робиш

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>

У мене є кнопка для підказки, що при натисканні вона відкриває діалогове вікно відображення, і тоді я можу написати те, що хочу шукати, і воно переходить до цього місця на сторінці. Він використовує 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) теж не пам'ятаю, як я зібрав усі шматочки та шматки. ☺