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

Question

我正在努力弄清楚这一点。 我有一个div设置为overflow: scroll; 。 我希望能够单击一个链接，并使该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>