【JQ】jQuery實現將div中滾動條滾動到指定位置的方法

本文轉載自查看原文 2020-12-09 15:17 1439
<!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>
【JQ】jQuery實現將div中滾動條滾動到指定位置的方法

相關鏈接：

免責聲明！
