Как перейти к хэштегу после загрузки страницы?

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

http://alavita.rizenclients.com/#story

Пытался сделать это с помощью кода...

$(window).load(function() {
    var hashTag = window.location.hash;
    window.location = '/' + hashTag;
});

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


javascript hashtag
person brunam    schedule 15.01.2013    source источник
comment
В итоге я использовал цепочку функций в комплекте с yepnope. jQuery получал значение смещения хэштега до заполнения содержимого. Я только что добавил смесь кода, с которым вы, ребята, помогли завершить.   -  person brunam    schedule 16.01.2013

Ответы (5)


arrow_upward
35
arrow_downward

Если вы просто хотите изменить хэш после загрузки страницы:

window.onload = function (event) {
    window.location.hash = "#my-new-hash";
};

Если вы хотите перейти к URL-адресу с новым хешем:

window.location.href = "http://website.com/#my-new-hash";

Если вы хотите прослушать изменения в хеше URL-адреса; вы можете рассмотреть возможность использования события DOM window.onhashchange.

window.onhashchange = function () {
    if (location.hash === "#expected-hash") {
        doSomething();
    }
};

Но пока он поддерживается не всеми основными браузерами. Теперь он имеет широкую поддержку браузеров< /а>. Вы также можете проверять наличие изменений, опрашивая window.location.hash с небольшими интервалами, но это тоже не очень эффективно.

Для кроссбраузерного решения; Я бы предложил плагин jQuery hashchange Бена Алмана, который сочетает в себе эти методы и некоторые другие с резервным механизмом.

РЕДАКТИРОВАТЬ: После обновления вашего вопроса я понимаю, что вы хотите, чтобы страница прокручивалась до закладки?:

Вы можете использовать метод Element.scrollTop или jQuery $.scrollTop().

$(document).ready(function (event) {
    var yOffset = $("#my-element").offset().top;
    $("body").scrollTop(yOffset);
});

См. документацию здесь.

person Onur Yıldırım    schedule 15.01.2013

arrow_upward
2
arrow_downward

По какой-то причине и MS Edge 42, и IE 11 не будут прокручиваться до новой закладки для меня, даже при выполнении window.location.reload(true) после установки новой закладки. Поэтому я придумал такое решение: вставьте этот скрипт на загружаемую страницу (требуется jquery)

$(document).ready(function() {
 var hash = window.location.hash;
 if (hash) {
  var elem = document.getElementById(hash.substring(1));
  if (elem) {
   elem.scrollIntoView();
  }
 }
});
person Rudiger W.    schedule 02.10.2018

arrow_upward
0
arrow_downward

Вы можете просто установить текущее местоположение:

window.location = 'http://alavita.rizenclients.com/#story';

Или установите хэш (если он еще не установлен), затем перезагрузите:

window.location.hash = hashTag;
window.location=window.location.href;
person Justin Bicknell    schedule 15.01.2013
comment
даже запуская этот код: [code]$(window).load(function() { var hashTag = window.location.hash; window.location = '/' + hashTag; }); на самом деле не приводит меня к началу раздела с тегами ... - person brunam; 16.01.2013

arrow_upward
0
arrow_downward

Вы изменили свой вопрос.

Проверьте это решение. https://stackoverflow.com/a/2162174/973860, чтобы вы понимали, что происходит и как реализовать кросс браузерное решение.

ВНИМАНИЕ: Внизу он упоминает плагин jquery, который сделает то, что вам нужно.

http://benalman.com/projects/jquery-hashchange-plugin/

Этот плагин позволит вам сделать что-то подобное. Это будет работать для вашей текущей страницы. Но вы можете изменить его, чтобы он был более надежным.

$(function(){

    // Bind the event.
    $(window).hashchange( function(){
        // get the hash
        var hash = window.location.hash;
        // click for your animation
        $('a[href=' + hash + ']').click();
    })

    // Trigger the event (useful on page load).
    $(window).hashchange();

});
person mwoods79    schedule 15.01.2013

arrow_upward
0
arrow_downward

Использование scrollTo или scrollIntoView не будет учитывать смещение, созданное селектором :target css. , который часто используется, чтобы прокрутить страницу чуть выше привязки, установив для него значение position: relative с отрицательным значением top.

Это прокрутит до якоря, соблюдая селектор :target:

if (location.hash) {
    window.location.replace(location.hash);
}
person John Knoop    schedule 28.07.2020