jquery - 将元素滚动到可滚动容器中的 View 中

Question

我有一个带有硬编码高度的滚动容器:

.scrollingContainer {
    overflow: scroll;
    height: 400px;
}

此滚动容器包含一个项目列表，当我单击该项目时，我想要滚动该容器，以便单击的项目位于滚动容器的顶部。

$('.scrollingContainer li a').click( function(event) {
  var vpHeight = $('.scrollingContainer').height();
  var offset = $(this).offset();
  $('.scrollingContainer').animate({
    scrollTop: vpHeight - offset.top
  }, 500);
});

以上是我目前所拥有的，我在需要执行的数学计算方面遇到了麻烦。另外，我认为 var offset 值不正确，因为它似乎是从页面顶部获取偏移量，我希望根据其在滚动容器中的位置获取偏移值。

任何帮助表示赞赏!

Answer 1

this answer 的变体诀窍是:

var myContainer = $('.scrollingContainer')

$(myContainer).on('click', 'a', function () {
  var scrollTo = $(this);

  myContainer.animate({
    scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop()
  });
});

Fiddle demo

var myContainer = $('.scrollingContainer')

$(myContainer).on('click', 'a', function() {
  var scrollTo = $(this);
  myContainer.animate({
    scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop()
  });
});

body {
  padding: 50px;
}

.scrollingContainer {
  overflow: scroll;
  height: 400px;
  background-color: #eee;
}

a {
  font-size: 150%;
  color: red;
}

<p>This is a demo for <a target="_blank" href="http://stackoverflow.com/questions/20101059/scroll-element-into-view-in-scrollable-container/20102855#20102855">a question at Stack Overflow</a>.</p>
<div class="scrollingContainer">
  <p>Tropical Storm Keith, the eleventh tropical storm of the 1988 season, was the latest North Atlantic tropical cyclone in the calendar year to strike the Continental United States since the 1925 season. Keith developed out of a tropical wave in the Caribbean
    Sea on November 17 and reached a peak intensity of 70 mph (110 km/h) shortly before striking the northeastern tip of the Yucatán Peninsula. It turned northeastward in the Gulf of Mexico, and made landfall near Sarasota, Florida, on November 23. Keith
    became extratropical near Bermuda on November 24. The extratropical remnant persisted for two more days. Keith produced moderate to heavy rainfall in Honduras, Jamaica, and Cuba. Minimal damage was reported in Mexico. The last of four named North
    Atlantic hurricanes to hit the United States during the season, <a href="#">click hereabouts</a>, rough storm surge, and gusty winds across central Florida. Overall damage was fairly minor but widespread, totaling $7.3 million. Near the coast of Florida,
    damage occurred mainly from storm surge and beach erosion. Further inland there were floods, downed trees and power lines. No fatalities were reported.</p>

  <ul>
    <li><a href="#">click hereabouts</a></li>
    <li><a href="#">click hereabouts</a></li>
  </ul>
  <p>Tropical Storm Keith, the eleventh tropical storm of the 1988 season, was the latest North Atlantic tropical cyclone in the calendar year to strike the Continental United States since the 1925 season. Keith developed out of a tropical wave in the Caribbean
    Sea on November 17 and reached a peak intensity of 70 mph (110 km/h) shortly before striking the northeastern tip of the Yucatán Peninsula. It turned northeastward in the Gulf of Mexico, and made landfall near Sarasota, Florida, on November 23. Keith
    became extratropical near Bermuda on November 24. The extratropical remnant persisted for two more days. Keith produced moderate to heavy rainfall in Honduras, Jamaica, and Cuba. Minimal damage was reported in Mexico. The last of four named North
    Atlantic hurricanes to hit the United States during the season, Keith produced moderate rainfall, rough storm surge, and gusty winds across central Florida. Overall damage was fairly minor but widespread, totaling $7.3 million. Near the coast of Florida,
    damage occurred mainly from storm surge and beach erosion. Further inland there were floods, downed trees and power lines. No fatalities were reported.</p>
  <p>Tropical Storm Keith, the eleventh tropical storm of the 1988 season, was the latest North Atlantic tropical cyclone in the calendar year to strike the Continental United States since the 1925 season. Keith developed out of a tropical wave in the Caribbean
    Sea on November 17 and reached a peak intensity of 70 mph (110 km/h) shortly before striking the northeastern tip of the Yucatán Peninsula. It turned northeastward in the Gulf of Mexico, and made landfall near Sarasota, Florida, on November 23. Keith
    became extratropical near Bermuda on November 24. The extratropical remnant persisted for two more days. Keith produced moderate to heavy rainfall in Honduras, Jamaica, and Cuba. Minimal damage was reported in Mexico. The last of four named North
    Atlantic hurricanes to hit the United States during the season, Keith produced moderate rainfall, rough storm surge, and gusty winds across central Florida. Overall damage was fairly minor but widespread, totaling $7.3 million. Near the coast of Florida,
    damage occurred mainly from storm surge and beach erosion. Further inland there were floods, downed trees and power lines. No fatalities were reported.</p>
  <p>Tropical Storm Keith, the eleventh tropical storm of the 1988 season, was the latest North Atlantic tropical cyclone in the calendar year to strike the Continental United States since the 1925 season. Keith developed out of a tropical wave in the Caribbean
    Sea on November 17 and reached a peak intensity of 70 mph (110 km/h) shortly before striking the northeastern tip of the Yucatán Peninsula. It turned northeastward in the Gulf of Mexico, and made landfall near Sarasota, Florida, on November 23. Keith
    became extratropical near Bermuda on November 24. The extratropical remnant persisted for two more days. Keith produced moderate to heavy rainfall in Honduras, Jamaica, and Cuba. Minimal damage was reported in Mexico. The last of four named North
    Atlantic hurricanes to hit the United States during the season, Keith produced moderate rainfall, rough storm surge, and gusty winds across central Florida. Overall damage was fairly minor but widespread, <a href="#">click hereabouts</a>. Near the
    coast of Florida, damage occurred mainly from storm surge and beach erosion. Further inland there were floods, downed trees and power lines. No fatalities were reported.</p>
  <p>Tropical Storm Keith, the eleventh tropical storm of the 1988 season, was the latest North Atlantic tropical cyclone in the calendar year to strike the Continental United States since the 1925 season. Keith developed out of a tropical wave in the Caribbean
    Sea on November 17 and reached a peak intensity of 70 mph (110 km/h) shortly before striking the northeastern tip of the Yucatán Peninsula. It turned northeastward in the Gulf of Mexico, and made landfall near Sarasota, Florida, on November 23. Keith
    became extratropical near Bermuda on November 24. The extratropical remnant persisted for two more days. Keith produced moderate to heavy rainfall in Honduras, Jamaica, and Cuba. Minimal damage was reported in Mexico. The last of four named North
    Atlantic hurricanes to hit the United States during the season, Keith produced moderate rainfall, rough storm surge, and gusty winds across central Florida. Overall damage was fairly minor but widespread, totaling $7.3 million. Near the coast of Florida,
    damage occurred mainly from storm surge and beach erosion. Further inland there were floods, downed trees and power lines. No fatalities were reported.</p>
  <p>Tropical Storm Keith, the eleventh tropical storm of the 1988 season, was the latest North Atlantic tropical cyclone in the calendar year to strike the Continental United States since the 1925 season. Keith developed out of a tropical wave in the Caribbean
    Sea on November 17 and reached a peak intensity of 70 mph (110 km/h) shortly before striking the northeastern tip of the Yucatán Peninsula. It turned northeastward in the Gulf of Mexico, and made landfall near Sarasota, Florida, on November 23. Keith
    became extratropical near Bermuda on November 24. The extratropical remnant persisted for two more days. Keith produced moderate to heavy rainfall in Honduras, Jamaica, and Cuba. Minimal damage was reported in Mexico. The last of four named North
    Atlantic hurricanes to hit the United States during the season, Keith produced moderate rainfall, rough storm surge, and gusty winds across central Florida. Overall damage was fairly minor but widespread, totaling $7.3 million. Near the coast of Florida,
    damage occurred mainly from storm surge and beach erosion. Further inland there were floods, downed trees and power lines. No fatalities were reported.</p>
</div>

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