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. Hive之侧视图(Lateral View)

    Lateral View和UDTF类功能函数一起使用,表中的每一行和UDTF函数输出的每一行进行连接,生成一张新的虚拟表,可以对UDTF产生的记录设置字段名称,新加的字段可以使用在sort by,gr ...

  2. Windows 10 S中的Device Guard详解(上篇)

    本文探讨Windows 10 S(下称Win10S)中的Device Guard(设备保护,下称DG).我将提取策略,并弄清楚在默认Win10S系统上可以和不可以运行什么.我将在下一篇文章中介绍在不安 ...

  3. 条款三:尽量用new和delete而不用malloc和free

    malloc和free(及其变体)会产生问题的原因在于它们太简单:他们不知道构造函数和析构函数. 假设用两种方法给一个包含10个string对象的数组分配空间,一个用malloc,另一个用new: s ...

  4. 牛腩新闻系统(一)——UML、数据库设计

    牛腩新闻系统(一)--UML.数据库设计 一.初识牛腩系统 牛腩(Brisket)即牛腹部及靠近牛肋处的松软肌肉,是指带有筋.肉.油花的肉 块.这是一种统称. 若依部位来分,牛身上很多地方的肉都能够叫 ...

  5. 华为OJ1964-求解立方根(牛顿迭代法)

    一.题目描述 描述: 计算一个数字的立方根,不使用库函数. 函数原型double getCubeRoot(double input) 输入: 待求解参数 double类型 输出: 输出参数的立方根,保 ...

  6. leetcode第一刷_Best Time to Buy and Sell Stock

    这样的题就不要去考虑N^2的算法了.肯定会超时的.乍一看,非常可能会想到贪心,可是普通的贪心思路是不行的,比方想找到一个最小值用来买入.尽管它跟最大值之间的差一定是最好的,可是最大值出如今它前面就不行 ...

  7. WCC框架设计

    一个好的框架,不仅能帮助程序开发节约很多时间,同时也能减少bug的引入.这个框架是在ssy同学的基础上进行了一些改进: 主要在于一下几点(会随着项目开发逐渐更新这篇文章) 1. 应用了反射机制,实现网 ...

  8. 为axure生成的html站点添加关闭所有节点的功能

    上一篇随笔:将Axure用于需求分析工具中,我分享了我做了一个axure部件,方便用axure中制作各种uml图. 用axure的朋友可能会发现一个问题,如下图,axure生成的html站点中所有的文 ...

  9. Dijkstra算法——最短路径(转)

    转自:http://www.cnblogs.com/biyeymyhjob/archive/2012/07/31/2615833.html Dijkstra算法 1.定义概览 Dijkstra(迪杰斯 ...

  10. Git经常使用命令总结

    Git是一款开源的分布式版本号控制系统,由Linux之父Torvalds用C语言开发. "the stupid content tracker",Git自诩为stupid,却是一个 ...