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 you have read our privacy policy.

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