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


Posted in Javascript onAugust 10, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JavaScript闭包的简单应用
Sep 01 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
javaScript Array api梳理
Mar 31 Javascript
Three.js学习之网格
Aug 10 #Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 #Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 #Javascript
最棒的Angular2表格控件
Aug 10 #Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 #Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 #Javascript
基于js中的原型、继承的一些想法
Aug 10 #Javascript
You might like
php 无限极分类
2008/03/27 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
答题辅助python代码实现
2018/01/16 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
安全生产目标责任书
2014/04/14 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书