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 ...
随机推荐
- element-ui自定义table表头
场景描述: 这个需求的场景很简单,表头自定义居中显示 <el-table-column show-overflow-tooltip prop="telephone" labe ...
- 我的arcgis培训照片8
来自:http://www.cioiot.com/successview-554-1.html
- 我的arcgis培训照片7
来自:http://www.cioiot.com/successview-553-1.html
- Start Xamarin——与Microsoft 的sales development manager的闲谈
由于在Xamarin属于微软之前,就已经有Xamarin的账号,试用过破解版的.所以4月1号微软set Xamarin free之后.就收到了Xamarin的邀请试用邮件. 试用完了之后第二天.收到邮 ...
- C# 插件热插拔 .NET:何时应该 “包装异常”? log4.net 自定义日志文件名称
C# 插件热插拔 所谓热插拔就是插件可以 在主程序不重新启动的情况直接更新插件, 网上有很多方案: https://www.cnblogs.com/happyframework/p/3405811 ...
- Grails边做边学入门篇[1]--------大家一起来动手建立project和Domain
近期工作比較忙,没空写博客了.我发现每周五的下午都是我最放松的时候,可能是迟延症的缘故吧...总是寄希望于周末,慢慢的.我的周末就被工作占领了. 希望大家不要有这种坏毛病.今日事,今日毕.当然我们程序 ...
- 2016/1/12 第一题 输出 i 出现次数 第二题 用for循环和if条件句去除字符串中空格 第三题不用endwith 实现尾端字符查询
import java.util.Scanner; public class Number { private static Object i; /* *第一题 mingrikejijavabu中字符 ...
- 爬虫定时任务 redis 减轻 mysql 读的压力 加层
非工作时间,定时任务爬虫大量mysq短链接,影响了其他业务的,mysql 报 too many connections 错误 将爬虫url池放入到redis中,单独的脚本维护redis url池的更 ...
- 修改数据表的字符集为utf8mb4
修改数据表的字符集为utf8mb4
- scapy基础-网络数据包结构
网络层次模型,数据包的组成是学习scapy的基础,下文主要关注模型中各个层次的用途,ethernet II和ip包数据结构. 1.五层模型简介 名称 作用 包含协议 应用层 面向程序对程序的传输 ...