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. POJ—— 2117 Electricity

    Electricity Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 5620   Accepted: 1838 Descr ...

  2. 洛谷 P4181 [USACO18JAN]Rental Service

    P4181 [USACO18JAN]Rental Service 题意翻译 farmer john有N(1≤N≤100,000)头牛,他想赚跟多的钱,所以他准备买牛奶和出租牛.有M(1≤M≤100,0 ...

  3. vue 重要的东西

  4. Windows下安Mac

    Windows PC下安装苹果系统 第一步: 準備2個新邏輯分區,一個6G(os),一個隨意(Mac),且不要格式化. 第二步: 启动硬盘助手,选择下载好的苹果镜像文件  .再选择6G(os)分區,寫 ...

  5. Websphere优化 (四个方面)举例

    Websphere优化 一.简单介绍 环境 名称 版本号 server操作系统 Centos 5.6 应用server操作系统 Windows 7 Websphere版本号 WAS 7.0 数据库 O ...

  6. reactjs 视频教程

    近期玩了一下react,感觉挺不错的,搜了一下没有看到什么视频教程,于是自己便录制了几个入门视频.希望能够帮到大家.已经上传土豆了,能够点击以下的链接查看. http://www.tudou.com/ ...

  7. iOS开发 - NSScanner的使用方法

    NSScanner这个类,用于在字符串中扫描指定的字符. 能够在创建NSScanner时指定它的string属性.然后scanner会依照要求从头到尾地扫描这个字符串中的每一个字符.扫描动作会使扫描仪 ...

  8. MariaDB -- 数据类型

    Mariadb 的数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的 常用的数据类型 整数:int, bit 小数:d ...

  9. 在阿里云域名https配置(nginx为例)

    如题: 在阿里云上注册了域名之后在阿里云域名控制台配置https: 1.在域名控制台选择要配置的域名,并在操作栏点击“解析” 2.在域名解析点击更多下的SSL进入到证书列表页,这里有收费的也有免费的, ...

  10. April Fools Day Contest 2014 H. A + B Strikes Back

    H. A + B Strikes Back time limit per test 1 second memory limit per test 256 megabytes input standar ...