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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP 数组基础知识小结
2010/08/20 PHP
php学习笔记之 函数声明
2011/06/09 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
基于node实现websocket协议
2016/04/25 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
Python函数返回值实例分析
2015/06/08 Python
Python编程中的异常处理教程
2015/08/21 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
团队经理竞聘书
2014/03/31 职场文书
节能减排倡议书
2014/04/15 职场文书