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 相关文章推荐
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
JavaScript函数详解
2014/11/17 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
python脚本第一行如何写
2020/08/30 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
运动会方队口号
2014/06/07 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
二审代理词范文
2015/05/25 职场文书
导游词之日本富士山
2020/01/06 职场文书