jQuery实现将div中滚动条滚动到指定位置的方法
1、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秒滑动到指定位置
}
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实现将div中滚动条滚动到指定位置的方法的更多相关文章
- DIV内滚动条滚动到指定位置
相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- js将滚动条滚动到指定位置的方法
代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
- DIV滚动条滚动到指定位置(jquery的position()与offset()方法区别小记)
相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- jquery操作滚动条滚动到指定位置
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
- JQuery控制滚动条滚动到指定位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位
HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- 设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
随机推荐
- .net 程序集保护与破解
一.保护方法(强签名.混淆.加壳) 强名称是由程序集的标识加上公钥和数字签名组成的.其中,程序集的标识包括简单文本名称.版本号.区域性信息(如果提供的话).语言文化信息.处理器架构信息.强名称是使用相 ...
- P1765 手机_NOI导刊2010普及(10)
P1765 手机_NOI导刊2010普及(10) 题目描述 一般的手机的键盘是这样的: 1 2 abc 3 def 4 ghi 5 jkl 6 mno 7 pqrs 8 tuv 9 wxyz * 0 ...
- 动态演示冒泡排序java
动态演示冒泡排序java //冒泡排序是一种简单的交换排序,基本思路,从数列左边开始扫描元素,在扫描过程中依次对相邻元素进行比较,将较大元素后移. public class NumberSort { ...
- mysql配置文件my.ini的修改问题
修改innodb_buffer_pool_size这个参数一般都没问题,但是修改innodb_log_file_size这个参数如果过大,mysql日志就会提示: Error: log file .\ ...
- Ubuntu 16.04 GNOME添加桌面图标/在桌面上显示图标
GNOME默认不能在桌面上创建文件夹,但是可以通过工具设置:用gnome-tweak-tool设置Nautilus接管桌面即可. 安装: sudo apt-get install gnome-twea ...
- 携程Apollo(阿波罗)配置中心在Spring Boot项目快速集成
前提:先搭建好本地的单机运行项目:http://www.cnblogs.com/EasonJim/p/7643630.html 说明:下面的示例是基于Spring Boot搭建的,对于Spring项目 ...
- Windows下如何查看当前登录用户
1.通过whoami命令查看 2.通过username变量查看,具体命令如下:echo %username% 上述两种方法只能查看当前会话用户信息,那么如何看到其他登录用户呢? 可以通过执行query ...
- C#中Stack<T>类的使用及部分成员函数的源代码分析
Stack<T>类 Stack<T> 作为数组来实现. Stack<T> 的容量是 Stack<T> 能够包括的元素数. 当向 Stack<T&g ...
- STL之关联容器的映射底层
STL的关联容器有set, map, multiset, multimap.用于实现它们的底层容器有划入标准的rb_tree和待增加标准的hashtable. 底层容器rb_tree为上层容器提供了一 ...
- UML——用例图
用例图是在需求分析阶段开发人员和用户对需求规格达成的某种共识.它描写叙述了待开发系统的功能需求. UML视频使我们对用例图的基本组成元素.属性.粒度等有了理论上的理解,我们还须要自己亲自己主动手画一画 ...