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 相关文章推荐
jQuery 对象中的类数组操作
Apr 27 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
JS实现简易日历效果
Jan 25 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--用万网的接口实现域名查询功能
2012/12/13 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
Three.js学习之网格
2016/08/10 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
github配置使用指南
2014/11/18 Python
python实现用户登录系统
2016/05/21 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
如何设置Java的运行环境
2013/04/05 面试题
个人自我剖析材料
2014/02/07 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
公证书格式
2015/01/23 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis