【JQ】jQuery实现将div中滚动条滚动到指定位置的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动到指定位置或者滚动到底部或者滚动到最新一条数据</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #single, #both{ width: 100px; height: 100px; overflow: auto; margin: 0 auto; border: 1px solid gray; } .common{ height: 150px; width: 150px; } </style> <script src="../js/jquery-1.7.2.js"></script> <script> window.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() //); //动画效果 console.log(scrollToContainer.offset().top, mainContainer.offset().top, mainContainer.scrollTop(), scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()); mainContainer.animate({ scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop() }, 2000);//2秒滑动到指定位置 } </script> </head> <body> <!-- 滚动底部 --> <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> </html>
相关链接:
作者:smile.轉角
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
欢迎关注我,一起进步!扫描下方二维码即可加我QQ
![](https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg)