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. BootStrap3栅格系统与布局

    栅格系统与布局 Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks t ...

  2. 洛谷——P1036 选数

    题目描述 已知 n 个整数 x1,x2,…,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k=3,4 个整数分别为 3,7,12, ...

  3. Spring Boot 2.1.5 正式发布,1.5.x 即将结束使命!

    Spring Boot 官网在 2019/03/15 这天发布了 Spring Boot 2.1.5 正式版,栈长表示真跟不上了.. 官宣如下 : https://spring.io/blog/201 ...

  4. JDBC示例(增删查改)

    前提: 1.项目中引入MySQL的JAR包,POM参考如下配置: <!-- mysql-connector-java --> <!-- http://mvnrepository.co ...

  5. sql 按中文排序

    sql server:select * from [表名]order by [字段],[字段] collate Chinese_PRC_CS_AS_KS_WS mysql:select * from ...

  6. 关于warning

    IT男正吸着雪茄,吐着烟圈.他女朋友生气了发飙道:“你没看见包装盒上的警告(Warning)么?吸烟有害健康!” IT男淡定地回答道:“我是程序员.我们不关心警告,只关心错误.”

  7. redux 简明学习

    核心概念 redux专注于状态管理,把所有的状态都存在一个对象中.核心概念包括:store.state.action.reducer [store] store是保存数据的地方,redux提供crea ...

  8. Python3 读取和写入excel

    https://blog.csdn.net/weixin_43094965/article/details/82226263一.Excel 1.Excel文件三个对象 workbook: 工作簿,一个 ...

  9. 在Linux(centos)上安装PHP的mongodb扩展 成功试过的

    到http://pecl.php.net/package/mongo下载相应的mongodb客户端,本例为1.2.1# wget http://pecl.php.net/get/mongo-1.2.1 ...

  10. PHP连接数据库(注冊页面的增删改查)

    1.连接数据库 ---------–connect.php--------------– <?php //本地測试 $host = '127.0.0.1'; $port = 3306; $use ...