您当前的位置: 首页 > 前端教程 > JS教程 > jQuery实现将div的滚动条滚动到指定位置

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

作者:xiaoxiao 来源:未知 发布时间: 2014-07-30 11:05 点击:
一、Js代码: onload= function (){ //初始化 scrollToLocation(); }; function scrollToLocation(){ var mainContainer=$( '#thisMainPanel' ), scrollToContainer=mainContainer.find( '.son-panel:last' ); //滚动到divid=thisMainPanel中类名为son-panel的最后一个

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实现将div的滚动条滚动到指定位置"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4