jQuery实现将div中滚动条滚动到指定位置的方法

时间:2020-05-15 Quber 人气:0

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：

一、Js代码：

onload = function () {
  //初始化
  scrollToLocation();
};
function scrollToLocation() {
  var mainContainer = $('#thisMainPanel'),
  scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
  //scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
  //非动画效果
  //mainContainer.scrollTop(
  //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  //);
  //动画效果
  mainContainer.animate({
    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  }, 2000);//2秒滑动到指定位置
}

二、Html代码：

<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
    <div class="son-panel">我是类容区域-1</div>
    <div class="son-panel">我是类容区域-2</div>
    <div class="son-panel">我是类容区域-3</div>
    <div class="son-panel">我是类容区域-4</div>
    <div class="son-panel" style="height:160px;">我是类容区域-5</div>
    <div class="son-panel">我是类容区域-6</div>
    <div class="son-panel">我是类容区域-7</div>
    <div class="son-panel">我是类容区域-8</div>
</div>

希望本文所述对大家jQuery程序设计有所帮助。

加载全部内容