Question

我正在努力解决这个问题。我有一个设置为overflow: scroll;的div。我希望能够单击一个链接，并使该div中的内容滚动到链接元素的顶部。由于某种原因，它似乎总是滚动直到元素的顶部到达主体的顶部为止。当它到达溢出div的顶部时，我需要它停止。在下面的示例中，当您单击“链接到第3段”时，我需要将第3段放在可滚动div的顶部。

$(document).ready(function(){
$("a").click(function(e){
    e.preventDefault();
    
    var anchor = $(this).attr("href");
    
    console.log(anchor);
      $(".parent").animate({
        scrollTop: $(anchor).offset().top - $(".parent").offset().top
      }, 2000);

});
});

body {background-color:tan;}

.parent {height:100px; overflow-y:scroll; background-color:#ffff; margin-top:100px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a href="#child3" class="child3">Link to paragraph 3</a>
<a href="#child4" class="child4">Link to paragraph 4</a>

<div class="parent">
  <div id="child1">
  <p><strong>paragraph 1</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child2">
  <p><strong>paragraph 2</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child3">
  <p><strong>paragraph 3</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child4">
  <p><strong>paragraph 4</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child5">
  <p><strong>paragraph 5</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>
</div>

Answer 1

jQuery的.offset()方法返回元素相对于文档的偏移量。为了解决这个问题，您需要减去容器的偏移量。下面，我仅修改了javascript的第四行。

$(document).ready(function(){
$("a").click(function(e){
    e.preventDefault();
    
    var anchor = $(this).attr("href");
    
    console.log(anchor);
      $(".parent").animate({
        scrollTop: $(".parent").scrollTop() + $(anchor).offset().top - $(".parent").offset().top
      }, 2000);

});
});

body {
    background-color:tan;
}

.parent {
    height:100px;
    overflow-y:scroll;
    background-color:#ffff;
    margin-top:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#child3" class="child3">Link to paragraph 3</a>
<a href="#child4" class="child4">Link to paragraph 4</a>

<div class="parent">
  <div id="child1">
  <p><strong>paragraph 1</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child2">
  <p><strong>paragraph 2</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child3">
  <p><strong>paragraph 3</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child4">
  <p><strong>paragraph 4</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>

  <div id="child5">
  <p><strong>paragraph 5</strong>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
  </p>
  </div>
</div>

动画滚动到溢出div内元素的顶部

1 个答案: