jquery - 向下滚动到单击的 DIV 不起作用

Question

有谁知道为什么这不能正常工作？基本上你应该有一个带有独特 anchor 的链接列表，通过点击其中一个链接，页面应该向下滚动到包含链接的 div 并给包含的 div 一个金色边框，同时删除所有旧的金色边框？我不知道我的代码有什么问题:)

$('.anchor').click(function(e) {

  //remove all previous borders
  $('.anchor *').css('border', '');

  //element ID
  var id = $(this).parent().attr('id');

  // prevent
  e.preventDefault();

  // top position relative to the document
  var pos = id.offset().top;
  var pos = pos - 100;

  // animated top scrolling
  $('body, html').animate({
    scrollTop: pos
  });

  //gold border for clicked div.
  $(this).parent().css("border", "1px solid gold");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container' id='".$anchor."'>
  <a class="anchor" href="#'.$anchor.'">
    <h4>Title</h4>
  </a>
</div>

Answer 1

您的 var pos = id.offset().top; 有问题，而且您声明了 2 次 var pos。

如果您正在使用 jQuery，请使用 $ 来处理任何元素，如 $(id) 而不仅仅是 id

$('.anchor').click(function(e) {

  //remove all previous borders
  $('.anchor *').css('border', '');

  // prevent
  e.preventDefault();

  // top position relative to the document
  var pos =  $(this).parent().offset().top;
  pos = pos - 100;

  // animated top scrolling
  $('body, html').animate({
    scrollTop: pos
  });

  //gold border for clicked div.
  $(this).parent().css("border", "1px solid gold");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container' id='".$anchor."'>
  <a class="anchor" href="#'.$anchor.'">
    <h4>Title</h4>
  </a>
</div>