1

господа.

Мастерю себе скрипт плавного перемещения по якорям на лендинге.

Написал такой код:

$('.anchor').bind('click', function(e) {
    e.preventDefault();
    var height = document.body.offsetHeight;
    var curPos = $(document).scrollTop();

    //to the anchor
    var anchorID = $(this).attr('href');
    console.log(anchorID);
    var anchorPos = $(anchorID).offset().top;
    console.log(anchorPos);
    var scrollTime = 0;

    if (anchorPos > curPos) {
      scrollTime = (height - curPos) / 3;
      $("body,html").animate({
        "scrollTop": anchorPos
      }, scrollTime);
    } else {
      scrollTime = curPos / 3;
      $("body,html").animate({
        "scrollTop": anchorPos
      }, scrollTime);
    }

  });

На лендинге есть 4 якоря такого вида:

<a name="test1"></a>
...
<a name="test2"></a>
...
<a name="test3"></a>

Ссылки, которые ведут на якоря выглядят вот так:

  <li>
    <a class="anchor" href="#test1">test1</a>
  </li>
  <li>
    <a class="anchor" href="#test2">test2</a>
  </li>

Скрипт работает на с 1 и последней ссылках. Те, что в середине, выбивают ошибку

Uncaught TypeError: Cannot read property 'top' of undefined

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

Буду благодарен за любую помощь! Заранее спасибо!

2 ответа 2

2

He name, a id.

Выборка $(anchorID) не содержит DOM-элементов, и ее метод .offset() возвращает undefined.

$('.anchor').bind('click', function(e) {
  e.preventDefault();
  var height = document.body.offsetHeight;
  var curPos = $(document).scrollTop();

  //to the anchor
  var anchorID = $(this).attr('href');
  console.log(anchorID);
  var anchorPos = $(anchorID).offset().top;
  console.log(anchorPos);
  var scrollTime = 0;

  if (anchorPos > curPos) {
    scrollTime = (height - curPos) / 3;
    $("body,html").animate({
      "scrollTop": anchorPos
    }, scrollTime);
  } else {
    scrollTime = curPos / 3;
    $("body,html").animate({
      "scrollTop": anchorPos
    }, scrollTime);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
На лендинге есть 4 якоря такого вида:

<a id="test1">111</a> ...
<a id="test2">222</a> ...
<a id="test3">333</a> ...
<a id="test4">444</a> Ссылки, которые ведут на якоря выглядят вот так:

<ul>
  <li>
    <a class="anchor" href="#test1">test1</a>
  </li>
  <li>
    <a class="anchor" href="#test2">test2</a>
  </li>
  <li>
    <a class="anchor" href="#test3">test3</a>
  </li>
  <li>
    <a class="anchor" href="#test4">test4</a>
  </li>
</ul>

1
  • Благодарю! Логика у меня отсутствует напрочь. Действительно заработало. 17 сен 2018 в 18:29
1

Вы ищете id, но тегам указали атрибут name.

Замените все <a name="testX"> на <div id="testX">.

1
  • Спасибо! Совет помог коду ожить 17 сен 2018 в 18:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.