Как перейти к следующей странице привязки с HTML и / или JS? - PullRequest
Новая
       7

Как перейти к следующей странице привязки с HTML и / или JS?

3 голосов
/ 26 июня 2010

Можно ли использовать HTML и / или Javascript для автоматического определения того, что якорь следующей страницы, и перейти к нему?

Ответы [ 4 ]

1 голос
/ 26 июня 2010

Спасибо за ответы всем, но мне удалось заставить это работать, реализовав http://marcgrabanski.com/articles/scrollto-next-article-button-jquery. Это работает, переходя к следующему заголовку, а не к следующему якору, но я думаю, что если важно использовать якоря, это может быть легко адаптируется для этого.

1 голос
/ 26 июня 2010

Читая ваш комментарий к Калгари Кодеру, я полагаю - если я вас правильно понимаю - вы ищете, чтобы найти якорь в текущем URL.Вы можете сделать это с window.locaiton.hash.Например, 

alert(window.location.hash);
1 голос
/ 26 июня 2010

Предполагается, что вы имеете в виду относительно известного якоря / элемента;если вы используете jQuery, у них есть селектор для «Next Sibling»;найти документацию здесь:

http://api.jquery.com/next-siblings-selector/

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

Редактировать

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

Редактировать

Они не завершены на 100%;но должно быть достаточно, чтобы вы получили общее представление.Если ваша страница имеет статический контент, я бы рекомендовал пройтись по странице и кэшировать все смещения в готовом документе;Определение смещения элементов может быть довольно медленным (особенно в старых браузерах).

var _anchorOffets = {};

$(document).ready(function () {
  $("A[id]:not(A[href])").each(function (index, value) {
    var $anchor = $(value);
    _anchorOffets[$anchor.attr("id")] = $anchor.offset().top;
  });
});

function getNextAnchorId() {
  var $window = $(window);
  var minOffset = $window.scrollTop() + $window.height();

  for (var anchor in _anchorOffets) {
    if (_anchorOffets[anchor] >= minOffset) {
      return anchor;
    }
  }

  return null;
}

в качестве альтернативы, если ваша страница имеет динамическое содержимое и местоположения якоря не зафиксированы в документе, то вы будете искать что-то ближе к 

function getNextAnchorId() {
  var result = null;

  $("A[id]:not(A[href])").each(function (index, value) {
    var $anchor = $(value);
    var $window = $(window);
    var minOffset = $window.scrollTop() + $window.height();

    if($anchor.offset().top >= minOffset) {
      result = $anchor.attr("id");
      return false;
    }
  });

  return result;
}

В зависимости от вашей страницыВозможно, вам придется расширить эту идею.Оба вышеуказанных решения предполагают довольно простую компоновку документа.Если у вас есть что-то необычное с относительным / абсолютным положением, прокручиваемыми div-символами и т. Д., Вам нужно усилить это (я могу предоставить код, если это так).На данный момент, хотя я предполагаю, что мы говорим об основных, найти якоря на странице, и выяснить, какой якорь будет следующим, основываясь на позиции прокрутки.Кроме того, я не проводил тщательного тестирования, поэтому может потребоваться некоторая полировка: D

0 голосов
/ 26 июня 2010

Мне кажется, я понимаю, что вы ищете. Если вы знаете идентификатор, вы можете использовать это ... 

function Next(){
    var lnkNext = document.getElementById("yourNextAnchorId");
    window.location.href = lnkNext.src;
}

если вы не знаете идентификаторы, возможно, получите якоря по внутреннему тексту

...