javascript - 如何将滚动位置动画到可滚动div中的目标元素？

Question

如何滚动到可滚动的多个锚点dviv？我的代码无法正常工作。当我参考htmlandbody元素时，我检查它工作正常。

$(document).ready(function() {
  $('.btnpins a').click(function(e) {
    e.preventDefault();
    $('.results').stop().animate({
      scrollTop: $($(this).attr('href')).offset().top - 60
    }, 400);
    return false;
  });
});

.results {
  width: 300px;
  height: 500px;
  margin-top: 20px;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnpins">
  <a href="#result1">Pin 1</a>
  <a href="#result2">Pin 2</a>
  <a href="#result3">Pin 3</a>
  <a href="#result4" class="focus">Pin 4</a>
</div>

<div class="results">
  <div class="resultin" id="result1">
    <h5>Result 1</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
  <div class="resultin" id="result2">
    <h5>Result 2</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
  <div class="resultin" id="result3">
    <h5>Result 3</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
  <div class="resultin" id="result4">
    <h5>Result 4</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

问题是因为offset()返回元素相对于 的位置，而不是父容器，因此当滚动位置不在顶部document时，返回的值被抛出。.results

为了解决这个问题，您需要在位置计算中允许div的offset()和。尝试这个：scrollTop().results

jQuery($ => {
  $('.btnpins a').click(function(e) {
    e.preventDefault();
    let $results = $('.results');
    let $target = $($(this).attr('href'));
    
    $results.stop().animate({
     scrollTop: $target.offset().top - $results.offset().top + $results.scrollTop()
    }, 400);
  });
});

.results {
  width: 300px;
  height: 500px;
  margin-top: 20px;
  overflow-y: scroll;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnpins">
  <a href="#result1">Pin 1</a>
  <a href="#result2">Pin 2</a>
  <a href="#result3">Pin 3</a>
  <a href="#result4" class="focus">Pin 4</a>
</div>

<div class="results">
  <div class="resultin" id="result1">
    <h5>Result 1</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
  <div class="resultin" id="result2">
    <h5>Result 2</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
  <div class="resultin" id="result3">
    <h5>Result 3</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
  <div class="resultin" id="result4">
    <h5>Result 4</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
  </div>
</div>