якорь прыжки с помощью javascript

Question

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

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

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

883 5

javascript html function anchor href

5 ответов:

Comments

Ничего не найдено.

Derek 朕會功夫 · Accepted Answer · 2018-08-06 08:11:53

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

вот более ленивый способ сделать это:
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
_{(Ну я соврал. Это совсем не сложно.)}

Adam111p · Accepted Answer · 2016-01-13 14:28:47

Я думаю, что это гораздо более простое решение:
window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"
этот метод делает не перезагружает сайт, и определяет фокус на якоря, что необходимо для чтения с экрана.

S.Doe_Dude · Accepted Answer · 2017-06-24 23:07:22

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

Jonathan Tribouharet Vukovich · Accepted Answer · 2012-12-06 04:42:51

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

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>

cmc · Accepted Answer · 2018-06-10 18:25:36

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

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

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

The location основанный метод в выбранном ответе также может быть упрощен с помощью location.replace:
function jump(hash) { location.replace("#" + hash) }