Изменение location.hash без прокрутки страницы

У нас есть несколько страниц, использующих ajax для загрузки контента, и там несколько раз, когда нам нужно глубоко подключиться к странице. Вместо того, чтобы иметь ссылку на "Пользователи" и говорить людям, чтобы щелкнуть "Настройки", полезно иметь возможность связать людей с настройками user.aspx #

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

Есть ли способ отключить это? Ниже приведен пример того, как я это делаю до сих пор.

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash=$(this).attr("id")
            //return false;
    });
});

Я надеялся, что return false; остановит прокрутку страницы - но это просто заставляет ссылку работать не на всех. Так что теперь просто прокомментировал, чтобы я мог перемещаться.

Любые идеи?

Ответы

Ответ 1

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

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash.replace("btn_","")).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash="btn_"+$(this).attr("id")
            //return false;
    });
});

Теперь URL-адрес отображается как page.aspx#btn_elementID, который не является реальным идентификатором на странице. Я просто удаляю "btn_" и получаю фактический идентификатор элемента

Ответ 2

Шаг 1: вам нужно разрядить идентификатор node, пока не будет установлен хеш. Это делается путем удаления идентификатора с node во время установки хеша, а затем добавления его обратно.

hash = hash.replace( /^#/, '' );
var node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
}
document.location.hash = hash;
if ( node.length ) {
  node.attr( 'id', hash );
}

Шаг 2: Некоторые браузеры будут запускать прокрутку в зависимости от того, где в последний раз был найден ID'd node, поэтому вам нужно немного помочь им. Вам нужно добавить дополнительный div в верхнюю часть области просмотра, установить его идентификатор в хэш, а затем снова отбросить все:

hash = hash.replace( /^#/, '' );
var fx, node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
  fx = $( '<div></div>' )
          .css({
              position:'absolute',
              visibility:'hidden',
              top: $(document).scrollTop() + 'px'
          })
          .attr( 'id', hash )
          .appendTo( document.body );
}
document.location.hash = hash;
if ( node.length ) {
  fx.remove();
  node.attr( 'id', hash );
}

Шаг 3: Оберните его в плагин и используйте вместо записи в location.hash...

Ответ 3

Используйте history.replaceState или history.pushState * для изменения хэша. Это не вызовет переход к связанному элементу.

Пример

$(document).on('click', 'a[href^=#]', function(event) {
  event.preventDefault();
  history.pushState({}, '', this.href);
});

Демо на JSFiddle

* Если вам нужна поддержка вперед и назад

История поведения

Если вы используете history.pushState, и вам не нужна прокрутка страницы, когда пользователь использует кнопки истории браузера (вперед/назад), проверьте экспериментальный параметр scrollRestoration (только для Chrome 46+).

history.scrollRestoration = 'manual';

Поддержка браузера

Ответ 4

Отрывок исходного кода:

$("#buttons li a").click(function(){
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});

Измените это на:

$("#buttons li a").click(function(e){
    // need to pass in "e", which is the actual click event
    e.preventDefault();
    // the preventDefault() function ... prevents the default action.
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});

Ответ 5

Недавно я строил карусель, который полагался на window.location.hash для поддержания состояния и сделал открытие, что браузеры Chrome и webkit будут вынуждать прокрутку (даже к невидимой цели) с неудобным рывком, когда происходит событие window.onhashchange.

Даже попытка зарегистрировать обработчик, который останавливает распространение:

$(window).on("hashchange", function(e) { 
  e.stopPropogation(); 
  e.preventDefault(); 
});

Не удалось остановить поведение браузера по умолчанию. Решение, которое я нашел, использовало window.history.pushState, чтобы изменить хеш, не вызывая нежелательных побочных эффектов.

 $("#buttons li a").click(function(){
    var $self, id, oldUrl;

    $self = $(this);
    id = $self.attr('id');

    $self.siblings().removeClass('selected'); // Don't re-query the DOM!
    $self.addClass('selected');

    if (window.history.pushState) {
      oldUrl = window.location.toString(); 
      // Update the address bar 
      window.history.pushState({}, '', '#' + id);
      // Trigger a custom event which mimics hashchange
      $(window).trigger('my.hashchange', [window.location.toString(), oldUrl]);
    } else {
      // Fallback for the poors browsers which do not have pushState
      window.location.hash = id;
    }

    // prevents the default action of clicking on a link.
    return false;
});

Затем вы можете прослушивать как обычное событие hashchange, так и my.hashchange:

$(window).on('hashchange my.hashchange', function(e, newUrl, oldUrl){
  // @todo - do something awesome!
});

Ответ 6

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

Это решение в основном предотвращает событие click от перемещения страницы, чтобы мы могли сначала получить положение прокрутки. Затем мы вручную добавляем хэш, и браузер автоматически запускает событие hashchange. Мы фиксируем событие hashchange и прокручиваем назад до правильной позиции. Обратный вызов отделяет и предотвращает ваш код, вызывающий задержку, сохраняя хаш-хакинг в одном месте.

var hashThis = function( $elem, callback ){
    var scrollLocation;
    $( $elem ).on( "click", function( event ){
        event.preventDefault();
        scrollLocation = $( window ).scrollTop();
        window.location.hash = $( event.target ).attr('href').substr(1);
    });
    $( window ).on( "hashchange", function( event ){
        $( window ).scrollTop( scrollLocation );
        if( typeof callback === "function" ){
            callback();
        }
    });
}
hashThis( $( ".myAnchor" ), function(){
    // do something useful!
});

Ответ 7

У меня есть несколько грубый, но определенно работающий метод.
Просто сохраните текущую позицию прокрутки в переменной temp, а затем reset после изменения хэша.:)

Итак, для исходного примера:

$("#buttons li a").click(function(){
        $("#buttons li a").removeClass('selected');
        $(this).addClass('selected');

        var scrollPos = $(document).scrollTop();
        document.location.hash=$(this).attr("id")
        $(document).scrollTop(scrollPos);
});

Ответ 8

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

Эта статья напрямую не связана с вашим вопросом, но в ней обсуждается типичное поведение браузера при изменении document.location.hash

Ответ 9

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

$('a[href^=#]').on('click', function(e){
    e.preventDefault();
    location.hash = $(this).attr('href')+'/';
});

$(window).on('hashchange', function(){
    var a = /^#?chapter(\d+)-section(\d+)\/?$/i.exec(location.hash);
});

Ответ 10

Добавление этого здесь, потому что более релевантные вопросы были отмечены как дубликаты, указывающие здесь...

Моя ситуация проще:

  • пользователь нажимает на ссылку (a[href='#something'])
  • обработчик кликов: e.preventDefault()
  • функция гладкого скручивания: $("html,body").stop(true,true).animate({ "scrollTop": linkoffset.top }, scrollspeed, "swing" );
  • , затем window.location = link;

Таким образом происходит прокрутка, и при обновлении местоположения нет перехода.

Ответ 11

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

Ответ 12

Здесь мое решение для вкладок с поддержкой истории:

    var tabContainer = $(".tabs"),
        tabsContent = tabContainer.find(".tabsection").hide(),
        tabNav = $(".tab-nav"), tabs = tabNav.find("a").on("click", function (e) {
                e.preventDefault();
                var href = this.href.split("#")[1]; //mydiv
                var target = "#" + href; //#myDiv
                tabs.each(function() {
                    $(this)[0].className = ""; //reset class names
                });
                tabsContent.hide();
                $(this).addClass("active");
                var $target = $(target).show();
                if ($target.length === 0) {
                    console.log("Could not find associated tab content for " + target);
                } 
                $target.removeAttr("id");
                // TODO: You could add smooth scroll to element
                document.location.hash = target;
                $target.attr("id", href);
                return false;
            });

И чтобы отобразить вкладку последнего выбора:

var currentHashURL = document.location.hash;
        if (currentHashURL != "") { //a tab was set in hash earlier
            // show selected
            $(currentHashURL).show();
        }
        else { //default to show first tab
            tabsContent.first().show();
        }
        // Now set the tab to active
        tabs.filter("[href*='" + currentHashURL + "']").addClass("active");

Обратите внимание на *= на вызов filter. Это специфичная для jQuery вещь, и без нее вкладки с поддержкой истории будут терпеть неудачу.

Ответ 13

Это решение создает div на фактическом scrollTop и удаляет его после изменения хэша:

$('#menu a').on('click',function(){
    //your anchor event here
    var href = $(this).attr('href');
    window.location.hash = href;
    if(window.location.hash == href)return false;           
    var $jumpTo = $('body').find(href);
    $('body').append(
        $('<div>')
            .attr('id',$jumpTo.attr('id'))
            .addClass('fakeDivForHash')
            .data('realElementForHash',$jumpTo.removeAttr('id'))
            .css({'position':'absolute','top':$(window).scrollTop()})
    );
    window.location.hash = href;    
});
$(window).on('hashchange', function(){
    var $fakeDiv = $('.fakeDivForHash');
    if(!$fakeDiv.length)return true;
    $fakeDiv.data('realElementForHash').attr('id',$fakeDiv.attr('id'));
    $fakeDiv.remove();
});

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

$('#menu a[href='+window.location.hash+']').click();

Ответ 14

У меня есть более простой метод, который работает для меня. В принципе, помните, что собственно хэш в HTML. Это привязка к тегу Name. Вот почему он прокручивает... браузер пытается прокрутить ссылку привязки. Итак, дайте это!

  • Прямо под тегом BODY введите свою версию:
 <a name="home"></a><a name="firstsection"></a><a name="secondsection"></a><a name="thirdsection"></a>

  1. Назовите раздел div с классами вместо идентификаторов.

  2. В коде обработки отмените отметку хэша и замените точкой:

    var trimPanel = loadhash.substring(1);    //lose the hash

    var dotSelect = '.' + trimPanel;  //replace hash with dot

    $(dotSelect).addClass("activepanel").show();        //show the div associated with the hash.

Наконец, удалите element.preventDefault или return: false и разрешите навигацию. Окно останется наверху, хеш будет добавлен к URL-адресу адресной строки, и откроется правильная панель.

Ответ 15

Я думаю, вам нужно reset прокрутить до своего положения до hashchange.

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash) {
        $("#buttons li a").removeClass('selected');
        s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
        eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function() {
            var scrollLocation = $(window).scrollTop();
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash = $(this).attr("id");
            $(window).scrollTop( scrollLocation );
    });
});

Ответ 16

Если на вашей странице вы используете id как своего рода точку привязки, и у вас есть сценарии, в которых вы хотите, чтобы пользователи добавляли #something в конец URL-адреса и прокручивали страницу до этого раздела #something, используя свой собственный определенный анимированный Функция javascript, слушатель события hashchange не сможет это сделать.

Если вы просто поместите отладчик сразу после события hashchange, например, что-то вроде этого (ну, я использую jquery, но вы поняли):

$(window).on('hashchange', function(){debugger});

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

Мое предложение:

  1. не используйте id в качестве точки привязки к разделу, к которому вы хотите перейти.

  2. Если вы должны использовать ID, как я. Вместо этого используйте прослушиватель события "popstate", он не будет автоматически прокручиваться до того самого раздела, который вы добавляете к URL, вместо этого вы можете вызвать свою собственную определенную функцию внутри события popstate.

    $(window).on('popstate', function(){myscrollfunction()});

Наконец, вам нужно сделать немного хитрости в вашей собственной определенной функции прокрутки:

    let hash = window.location.hash.replace(/^#/, '');
    let node = $('#' + hash);
    if (node.length) {
        node.attr('id', '');
    }
    if (node.length) {
        node.attr('id', hash);
    }

удалить идентификатор в вашем теге и сбросить его.

Это должно сделать свое дело.

Ответ 17

Добавляйте этот код только в jQuery в готовом документе

Ссылка: http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});