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中滚动条滚动到指定位置的方法的更多相关文章

  1. DIV内滚动条滚动到指定位置

    相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...

  2. js将滚动条滚动到指定位置的方法

    代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  4. DIV滚动条滚动到指定位置(jquery的position()与offset()方法区别小记)

    相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...

  5. jquery操作滚动条滚动到指定位置

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  6. JQuery控制滚动条滚动到指定位置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

    HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...

  8. jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...

  9. 设置DIV随滚动条滚动而滚动

    有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

随机推荐

  1. 洛谷——P1151 子数整数

    P1151 子数整数 题目描述 对于一个五位数a1a2a3a4a5,可将其拆分为三个子数: sub1=a1a2a3 sub2=a2a3a4 sub3=a3a4a5 例如,五位数20207可以拆分成 s ...

  2. java反射-使用反射来操纵方法

    一个类的主要成员时方法,辣么我们通过反射获取到一个类的所有方法信息后,总的寻找一种方式去操作调用这些方法,这样反射才有意义有意思. Method对象有一个方法invoke.      public O ...

  3. 第一个Spring程序(DI的实现)

    一,依赖注入:Dependency Injection(DI)与控制反转(IoC),不同角度但是同一个概念.首先我们理解一点在传统方式中我们使用new的方式来创建一个对象,这会造成对象与被实例化的对象 ...

  4. P1665 正方形计数

    P1665 正方形计数 题目描述 给定平面上N个点,你需要计算以其中4个点为顶点的正方形的个数.注意这里的正方形边不一定需要和坐标轴平行. 输入输出格式 输入格式: 第一行一个数X,以下N个点的坐标. ...

  5. 携程Apollo(阿波罗)配置中心在Spring Boot项目快速集成

    前提:先搭建好本地的单机运行项目:http://www.cnblogs.com/EasonJim/p/7643630.html 说明:下面的示例是基于Spring Boot搭建的,对于Spring项目 ...

  6. Spring集成Redis方案(spring-data-redis)(基于Jedis的单机模式)(待实践)

    说明:请注意Spring Data Redis的版本以及Spring的版本!最新版本的Spring Data Redis已经去除Jedis的依赖包,需要自行引入,这个是个坑点.并且会与一些低版本的Sp ...

  7. c# Action,Func,Predicate委托

    System命名空间下已经预先定义好了三中泛型委托,Action,Func和Predicate,这样我们在编程的时候,就不必要自己去定义这些委托了 Action是没有返回值的 Func是带返回值的 不 ...

  8. 2016/2/18 html 图片热点,网页划区,拼接,表单

    ①图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 显示 ②网页划区 在一个网页里,规划出一个区域用来展示另一个网页的内容. ③网页拼接 在一个网络页面内,规划 ...

  9. Keil和IAR——使用笔记

    1. 几个宏的定义 Keil和IAR均用到以下三种宏定义,分别是:USE_STDPERIPH_DRIVER——表示使用ST提供的标准外设固件库:STM32F40_41xxx——作为芯片的判断:VECT ...

  10. 7 Worksheet 对象

    7.1 设置阶段 代码清单7.1:使用Parent属性获得一个对象的父对象的指针 '使用Parent属性获得一个对象的父对象的指针 Sub MeetMySingleParent() 'Declare ...