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 ...
随机推荐
- BZOJ——2190: [SDOI2008]仪仗队
思路: 我们将其所在的位置设为(0,0),那么如果存在一个点(x,y),且有gcd(x,y)=k(k!=1),那么点(x/k,y/k)一定会将(x,y)挡住.而如果k=1,那么点(x,y)就一定会被看 ...
- codevs——1742 爬楼梯
1742 爬楼梯 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 小明家外面有一个长长的楼梯,共N阶.小明的 ...
- flask应用的分页
Flask-SQLAlchemy支持分页 https://www.jianshu.com/p/5e03cd202728
- ArcGIS Python 编码问题
吐槽一下ArcGIS自带的 Python IDE, 没有代码补全 没有函数提示 没有代码折叠 没有行号 撤销操作还有问题 字符编码还有各种问题 ......... 花了2天时间才琢磨出来的经验 环 ...
- 小白学开发(iOS)OC_ 字符串的获取 (2015-08-11)
// // main.m // 字符串的获取 // // Created by admin on 15/8/13. // Copyright (c) 2015年 admin. All righ ...
- HDU 5371 Manacher
点击打开链接 题意:给定一串数字.求最长的一段连续的数字,将它平均分为三段.满足第一段和第二段是回文的.第一段和第三段相等 思路:第一段和第二段是回文的.那么第二段和第三段也是回文的,将数列进行Man ...
- zipfile zip
Python模块学习:zipfile zip文件操作 2015/05/27 · 系列教程 · zipfile 分享到:3 原文出处: DarkBull 最近在写一个网络客户端下载程序,用于下载服 ...
- UVA 1397 - The Teacher's Side of Math(高斯消元)
UVA 1397 - The Teacher's Side of Math 题目链接 题意:给定一个x=a1/m+b1/n.求原方程组 思路:因为m*n最多20,全部最高项仅仅有20.然后能够把每一个 ...
- JSON介绍及Android最全面解析方法(Gson、AS自带org.son、Jackson解析)
前言 今天,我们来介绍一下现今主流的数据交换格式-JSON! 相同作为主流为数据交换格式-XML,假设有兴趣能够阅读我写的XML及其DOM.SAX.PULL解析方法和对照 文件夹 定义 JavaScr ...
- MySQL-数据更新(UPDATE)
MySQL-UPDATE语句 功能介绍:用于更新表中的现有数据.亦可用UPDATE语句来更改表中单个行,一组行或所有行的列值. MySQL-UPDATE语法: UPDATE [LOW_PRIORITY ...