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 相关文章推荐
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
微信小程序实现订单倒计时
Nov 01 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 和 HTML
2006/10/09 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
javascript 短路法代码精简
2009/08/20 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python版百度语音识别功能
2019/07/09 Python
python程序输出无内容的解决方式
2020/04/09 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Python打印不合法的文件名
2020/07/31 Python
python -v 报错问题的解决方法
2020/09/15 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
信息专业本科生个人的自我评价
2013/10/28 职场文书
学校司机岗位职责
2013/11/14 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
小学生通知书评语
2014/12/31 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
详解python字符串驻留技术
2021/05/21 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
js前端图片加载异常兜底方案
2022/06/21 Javascript