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 ...
随机推荐
- java核心技术卷一
java核心技术卷一 java基础类型 整型 数据类型 字节数 取值范围 int 4 +_2^4*8-1 short 2 +_2^2*8-1 long 8 +_2^8*8-1 byte 1 -128- ...
- kvc VS kvo
Kvo是Cocoa的一个重要机制,它主要是用于对一个属性的新旧值的监控. 例如说依据A(数 据类)的某个属性值变化,B(view类)中的某个属性做出对应变化.对于MVC,kvo应用的地方很广泛. 使用 ...
- Django打造大型企业官网(四)
4.3.轮播图布局和样式 templates/news/index.html <div class="news-wrapper"> <div class=&quo ...
- Unix - 文件里构成一个空洞的分析
lseek函数显示地为一个打开文件设置偏移量,文件偏移量能够大于文件的当前长度,在这样的情况下.对该文件的下一次写将加长该文件.并在文件里构成一个空洞,这一点是同意的. 位于文件里但没有写过的字节都被 ...
- 利用栈Stack实现队列(Queue)
实现说明: 入队时,将元素压入s1; 出队时,推断s2是否为空,如不为空,则直接弹出顶元素:如为空.则将s1的元素逐个"倒入"s2.把最后一个元素弹出并出队; 这个思路,避免了重复 ...
- AVD那些事儿
启动了AVD却说找不到AVD 错误提示: No active compatible AVD's or devices found. Relaunch this configuration after ...
- 《ASP.NET4 从入门到精通》学习笔记4
第4部分诊断与插件 刚開始看这章的时候,真实一头雾水.不知道在讲什么.只是看了关于http pipeline之后.才了解相关说明. 因此对于这一章的学习,建议各位首先看看http pipeline然后 ...
- HDU 1505 City Game(DP)
City Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- YTU 2631: B1 能存各种类型数据的Store类
2631: B1 能存各种类型数据的Store类 时间限制: 1 Sec 内存限制: 128 MB 提交: 245 解决: 177 题目描述 有一种类,海纳百川,可以对任意类型的数据进行存取,造就 ...
- JFreeChart基础(1) (转自 JSP开发技术大全)
JFreeChart基础(1) (转自 JSP开发技术大全) JFreeChart是一个Java开源项目,是一款优秀的Java图表生成插件,它提供了在Java Application.Servlet和 ...