Comment implémenter jQuery pour faire défiler la barre de défilement dans un div jusqu'à une position spécifiée-PHP开发-php.cn

Maison

php教程

PHP开发

Comment implémenter jQuery pour faire défiler la barre de défilement dans un div jusqu'à une position spécifiée

Dec 24, 2016 pm 03:03 PM

L'exemple de cet article décrit comment jQuery implémente le défilement de la barre de défilement dans un div vers une position spécifiée. Partagez-le avec tout le monde pour votre référence, comme suit :

1. Code Js :

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

Copier après la connexion

2. >

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

Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la programmation jQuery.

Pour plus de méthodes jQuery permettant d'implémenter le défilement de la barre de défilement dans un div vers une position spécifiée, veuillez faire attention au site Web PHP chinois !

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn