【JQ】jQuery實現將div中滾動條滾動到指定位置的方法
阿新 • • 發佈：2020-12-09
<!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>