Прокрутите до якоря, сохраняя хэш

Question

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

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

$(".navigation a").click(function(e){ 
    $(".navigation a").removeClass("active"); 
    $(this).addClass("active"); 

    if ($(this).attr("href").substring(0,1) == "#"){ 
     e.preventDefault(); 

     $('html, body').animate({ 
      scrollTop: $($(this).attr("href")).offset().top 
     }, 1000); 
    } 
}); 

Answer 1

Я не знаю, насколько хорошо вы должны поддерживать старые браузеры, но в противном случае вы можете использовать pushState functionallity что URL дает документацию о том, как использовать его :)

Поддерживается всеми браузерами и IE10 (так что нет 9 или меньше)

---

раствор не-PushState бы, чтобы перейти к нужной высоте, а затем изменить URL. Если сделано правильно, страница обыкновение прыгать :)

// you should change class navigation to id navigation, since there probally is only one 
$(".navigation".find("a").click(function(e){ // with id this will speed up a bit 
    //$(".navigation a").removeClass("active"); 
    $(".navigation a.active").removeClass("active"); // with A its faster 
    $(this).addClass("active"); 
    var anchorDestination = this.href; // save for later, select as little times as possible 

    //if ($(this).attr("href").substring(0,1) == "#"){ 
    if (this.href.substring(0,1) == "#"){ // use native JS where possible 
     e.preventDefault(); 
     var anchorDestination = this.href; // save for later 
     var $aElem = $(this); // select it once, save it for later 

     $('html, body').animate({ 
      //scrollTop: $($(this).attr("href")).offset().top 
      scrollTop: $aElem.offset().top 
     }, 1000, function(){ 
      window.location = anchorDestination; 
     }); 
    } 
});