更新时间：2016年08月10日 09:55:17 作者：Quber
这篇文章主要介绍了jQuery实现将div中滚动条滚动到指定位置的方法,涉及jQuery结合animate方法动态操作页面元素属性的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：
一、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秒滑动到指定位置
二、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>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《
jQuery常用插件及用法总结
》、《
jQuery常见经典特效汇总
》、《
jQuery form操作技巧汇总
》、《
jQuery操作json数据技巧汇总
》、《
jQuery扩展技巧总结
》、《
jQuery拖拽特效与技巧总结
》、《
jQuery表格(table)操作技巧汇总
》、《
jquery中Ajax用法总结
》、《
jQuery动画与特效用法总结
》及《
jquery选择器用法总结
》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
-
-
-
jquery实现页面加载效果
本文主要介绍了jquery实现页面加载效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
-
-
-
jquery实现简单的全选和反选功能
我们在做项目的时候，经常需要实现全选和反选功能，到网上搜了一圈，发现网上写的全选的代码，不是完整的，是有bug的。下面结合自己的项目给大家分享下。
2016-01-01
-
-
-
-
jQuery 表单验证扩展代码(二)
前些天写了一篇文章 jQuery 表单验证扩展(一) ，这是jQuery表单验证扩展的一个雏形，里面有了一些基本的功能！昨晚再次努力了一下，对表单中是否必填项验证这个部分做了一些修改的扩充！
2010-10-10
-
基于JQuery的Pager分页器实现代码
页面分页对于程序员来说最熟悉不过，在WEB开发中经常需要对页面进行分页，jQuery插件JQuery Pager分页器能轻松实现javascript分页功能，只需要几行代码，javascript分页简单搞定。
2010-07-07
