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 3468_A Simple Problem with Integers(线段树)

    题意: 给定序列及操作,求区间和. 分析: 线段树,每个节点维护两个数据: 该区间每个元素所加的值 该区间元素和 可以分为"路过"该区间和"完全覆盖"该区间考虑 ...

  2. component and slot

    component and slot 使用: 1.component panel <article class="message"> <div class=&qu ...

  3. 浅谈cookie,sessionStorage和localStorage区别

    在客户端存储数据可以使用的技术有如下四种: Cookie技术:浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好 H5 WebStorage:不能超过8MB,操作简单: ...

  4. Vue中对获取的数据进行重新排序

    var Enumerable = require('linq'); // 使用linq 按照RegisterID排序listJust是自己定义的数组,来接收数据.listJust: [] addDat ...

  5. 网页页面NULL值对浏览器兼容性的影响

    网页页面NULL值对浏览器兼容性的影响       近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...

  6. php删除数组中指定值的元素

    php删除数组中指定值的元素 /** * 删除数组中指定值的元素 * @author: ibrahim * @param array $arr 数组 * @param string $val 值 * ...

  7. react jsx 常见问题

    问题一: Expected to return a value in arrow function 解决方案: 修改后: // 使用 store return ( <div> <h1 ...

  8. [转] CVonline: Image Databases

    转自:CVonline by Robert Fisher 图像数据库 Index by Topic Action Databases Biological/Medical Face Databases ...

  9. react 开发过程中的总结/归纳

    1.点击元素,获取绑定该事件的父级元素,使用 e.currentTarget.e.target 获取的是,出发该事件的元素,该元素有可能是所绑定事件的元素的子元素. 2.使用 react router ...

  10. [Java] 监控java对象回收的原理与实现

    监控Java对象回收的原理与实现 一.监控Java对象回收的目的 监控Java对象是否回收的目的是:为了实现内存泄露报警. 内存泄露是指程序中对象生命周期(点击查看详情)已经进入不可见阶段,但因为编码 ...