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

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

高洛峰
高洛峰original
2016-12-24 15:03:402319parcourir

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 = $('#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>

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