ホームページ > php教程 > PHP开发 > div内のスクロールバーを指定した位置までスクロールするjQueryを実装する方法

div内のスクロールバーを指定した位置までスクロールするjQueryを実装する方法

高洛峰
リリース: 2016-12-24 15:03:40
オリジナル
2303 人が閲覧しました

この記事の例では、jQuery が div 内のスクロール バーを指定された位置までスクロールする方法を実装する方法について説明します。以下のように、参考として皆さんと共有してください:

1. 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. 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 プログラミングの皆さんに役立つことを願っています。


div 内のスクロール バーを指定した位置までスクロールする実装のためのその他の jQuery メソッドについては、PHP 中国語 Web サイトの関連記事に注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート