Heim >php教程 >PHP开发 >So implementieren Sie jQuery, um die Bildlaufleiste in einem Div an eine angegebene Position zu scrollen

So implementieren Sie jQuery, um die Bildlaufleiste in einem Div an eine angegebene Position zu scrollen

高洛峰
高洛峰Original
2016-12-24 15:03:402317Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery das Scrollen der Bildlaufleiste in einem Div an eine angegebene Position implementiert. Teilen Sie es wie folgt mit allen:

1. Js-Code:

onload = function () {
  //初始化
  scrollToLocation();
};
function scrollToLocation() {
  var mainContainer = $('#thisMainPanel'),
  scrollToContainer = mainContainer.find(&#39;.son-panel:last&#39;);//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
  //scrollToContainer = mainContainer.find(&#39;.son-panel:eq(5)&#39;);//滚动到<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秒滑动到指定位置
}

2 >

<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>

Ich hoffe, dass dieser Artikel für alle in der jQuery-Programmierung hilfreich sein wird.


Weitere jQuery-Methoden zum Implementieren des Scrollens der Bildlaufleiste in einem Div an eine bestimmte Position finden Sie auf der chinesischen PHP-Website!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn