The example in this article describes how jQuery implements scrolling the scroll bar in a div to a specified position. Share it with everyone for your reference, as follows:
1. Js code:
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 code:
<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>
I hope this article will help everyone in jQuery programming.
For more jQuery methods to implement scrolling the scroll bar in a div to a specified position, please pay attention to the PHP Chinese website for related articles!