【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>

【JQ】jQuery实现将div中滚动条滚动到指定位置的方法

相关链接：

导航

统计

公告

积分与排名

随笔分类 (185)

随笔档案 (263)

最新评论