Question

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

＆＃13;

$('.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");
})

＆＃13;

<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>

＆＃13;

Answer 1

您的var pos = id.offset().top;有问题，而且您已宣布var pos 2次。

如果您正在使用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>

Answer 2

您正在读取没有它的属性的偏移量。您需要获得元素的偏移量。

这样做时：

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

您将获得ID（string）。

因此，当您拥有id时，您需要获取元素，然后您可以请求偏移量。

var myElement = $(id);
myElement.offset();

Answer 3

Working Fiddle

如下所示：

  var $this = $(this); // DOM Object
  var pos = $this.offset().top;
  var pos = pos - 100;

向下滚动以点击DIV无法正常工作

3 个答案: