Изменить URL-адрес при ручной прокрутке на якорь?

Ответ 1

Попробуйте использовать этот плагин jquery: Scrollorama. Он имеет массу полезных функций, и вы можете использовать window.location.hash для обновления хэша браузера.

В качестве альтернативы вы можете добавить событие "прокрутки", чтобы проверить, когда достигнута привязка.

Вот пример скрипта для иллюстрации: http://jsfiddle.net/gugahoi/2ZjWP/8/ Пример:

$(function () {
    var currentHash = "#initial_hash"
    $(document).scroll(function () {
        $('.anchor_tags').each(function () {
            var top = window.pageYOffset;
            var distance = top - $(this).offset().top;
            var hash = $(this).attr('href');
            // 30 is an arbitrary padding choice, 
            // if you want a precise check then use distance===0
            if (distance < 30 && distance > -30 && currentHash != hash) {
                window.location.hash = (hash);
                currentHash = hash;
            }
        });
    });
});

Ответ 2

вы можете использовать pushstate HTML 5 для изменения URL-адреса в адресной строке

window.history.pushstate

• https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
• Как я могу использовать window.history.pushState 'безопасно'

Ответ 3

• Привязать обработчик к событию прокрутки jquery.
• Проверьте, отображается ли на экране якорь на экране этот jquery script.
• Использовать pushstate или установить местоположение (возможно, вызовет переходы)

Ответ 4

Вы можете привязываться к событию прокрутки jQuery (http://api.jquery.com/scroll/) и при каждом вызове вызываемого вызова проверить, насколько далеко находится документ пользователь прокрутил, проверив это значение:.scrollTop(http://api.jquery.com/scrollTop/) и установите привязку, манипулируя объектом te location.hash(http://www.w3schools.com/jsref/prop_loc_hash.asp).

Это будет примерно так:

// Checks if the passed element is visible on the screen after scrolling
// source: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$('#document').scroll(function(e) {
  var anchors = $('.anchor');
  for (var i = 0; i < anchors.length; ++i) {
    if (isScrolledIntoView(anchors[i])){
      var href = $(anchors[i]).attr('href');
      location.hash = href.slice(href.indexOf('#') + 1);
      break;
    }
  }
});

Вы можете быть более точным, если сортировать анкеры после их выбора, чтобы первый видимый якорь был установлен всегда.

Ответ 5

Я думаю, вам нужно сделать что-то вроде этого. Не пробовал в действии

var myElements = $("div.anchor"); // You target anchors
$(window).scroll(function(e) {
    var scrollTop = $(window).scrollTop();
    myElements.each(function(el,i) {
        if ($(this).offset().top > scrollTop && $(myElements[i+1]).offset().top < scrollTop) {
             location.hash = this.id;
        }
    });
});`

Ответ 6

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

Эта функция перебирает элементы раздела HTML.

        function updateFragId() {
        var len = sections.length;
          for (var i = 0; i < len; i++) {
            var id = sections[i].id;

Собирает позицию прокрутки Y относительно области просмотра.

            var rect = sections[i].getBoundingClientRect().y;

преобразовать два массива в объект

            var pageData = {id:id, rect:rect};

установить диапазон для запуска кода между ними. Здесь это сработает, когда верхняя часть элемента section будет между -200px и 400px

            if (pageData.rect > -200 && pageData.rect < 400) {

запускается только один раз, убедившись, что pageData.id и location.hash уже не совпадают. Это мешает заполнить ваш браузер событиями.

        if (pageData.rect > -100 && pageData.rect < 100) {
            if (pageData.id !== location.hash.substr(1)) {
                fragmentId = pageData.id;
                setActiveLink(fragmentId);
              } else {
                return;
            }
          }
        }
      }

    window.addEventListener('scroll', updateFragId);

Я использую debouncer для этого блока кода с другим блоком для установки активной ссылки. Но это только как отследить # якоря.