jQuery实现将div中滚动条滚动到指定位置的方法
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中滚动条滚动到指定位置的方法的更多相关文章
- DIV内滚动条滚动到指定位置
相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- js将滚动条滚动到指定位置的方法
代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
- DIV滚动条滚动到指定位置(jquery的position()与offset()方法区别小记)
相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- jquery操作滚动条滚动到指定位置
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
- JQuery控制滚动条滚动到指定位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位
HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- 设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
随机推荐
- 2017-10-01-morning
T1 位运算1(bit) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK拥有一个十进制的数N.它赋予了N一个新的意义:将N每一位都拆开来后再加起来就是N ...
- cogs——1364. 聚会
1364. 聚会 ★ 输入文件:partyb.in 输出文件:partyb.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 小S想要从某地出发去同学k的家中参加 ...
- mssql存储过程异常处理
MSSQL2000和MSSQL2005以上版本的异常处理语法是不相同的. SQL Server 2005以上版本支持结构化异常处理,而MSSQL2000是不支持的. 1)先看MSSQL 2000的异常 ...
- 玩转iOS开发 - 消息推送
消息推送
- Python学习系列之format用法
format是代替%s格式的方法 不需要理会数据类型的问题,在%s方法中的%s只能代替字符串类型 填充方式十分灵活,对其方式十分强大 format填充字符串 通过位置来填充字符串 #format会把参 ...
- scala 入门Eclipse环境搭建及第一个入门经典程序HelloWorld
scala 入门Eclipse环境搭建及第一个入门经典程序HelloWorld 学习了: http://blog.csdn.net/wangmuming/article/details/3407911 ...
- JSP简单练习-包装类综合应用实例
<%@ page contentType="text/html; charset=gb2312" %><!-- JSP指令标签 --> <%@ pag ...
- 找了两个node+vue-cli+mogodb的小项目学学
实现的博客系统,自己抽时间搭建看看 https://www.cnblogs.com/yesyes/p/7188331.html https://github.com/chaohangz/vueBlog
- docker+zabbix,使用docker搭建zabbix服务
Zabbix 介绍 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...
- HDU Today HDU杭电2112【Dijkstra || SPFA】
http://acm.hdu.edu.cn/showproblem.php?pid=2112 Problem Description 经过锦囊相助,海东集团最终度过了危机,从此.HDU的发展就一直顺风 ...