jQuery implements the method of scrolling the scroll bar in div to the specified position

This article illustrates how jQuery implements scrolling a scroll bar in div to a specified position. Share it for your reference, as follows:

1. Js code:

onload = function () {
  // Initialization 
  scrollToLocation();
};
function scrollToLocation() {
  var mainContainer = $('#thisMainPanel'),
  scrollToContainer = mainContainer.find('.son-panel:last');// Scroll to <div id="thisMainPanel"> The class in the class is named son-panel The last of 1 A div Department 
  //scrollToContainer = mainContainer.find('.son-panel:eq(5)');// Scroll to <div id="thisMainPanel"> The class in the class is named son-panel The first part of 6 Individual place 
  // Non-animated effect 
  //mainContainer.scrollTop(
  //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  //);
  // Animation effect 
  mainContainer.animate({
    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  }, 2000);//2 Slide to the specified position in seconds 
}

2. Html code:

<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
    <div class="son-panel"> I am a class capacity area -1</div>
    <div class="son-panel"> I am a class capacity area -2</div>
    <div class="son-panel"> I am a class capacity area -3</div>
    <div class="son-panel"> I am a class capacity area -4</div>
    <div class="son-panel" style="height:160px;"> I am a class capacity area -5</div>
    <div class="son-panel"> I am a class capacity area -6</div>
    <div class="son-panel"> I am a class capacity area -7</div>
    <div class="son-panel"> I am a class capacity area -8</div>
</div>

For more readers interested in jQuery related content, please check the topics of this site: "Summary of Common Plugins and Usage of jQuery", "Summary of Common Classic Special Effects of jQuery", "Summary of Operation Skills of jQuery form", "Summary of Data Skills of Operation of json of jQuery", "Summary of Extension Skills of jQuery", "Summary of Drag and Drop Special Effects and Skills of jQuery", "Summary of Operation Skills of jQuery Table (table)", "Summary of Usage of Ajax in jquery", "Summary of Usage of Animation and Special Effects of jQuery" and "Usage of

I hope this article is helpful to everyone's jQuery programming.