Javascript 焦点可滚动div到某个位置_Javascript_Jquery_Html_Css

Javascript 焦点可滚动div到某个位置

javascript jquery html css

Javascript 焦点可滚动div到某个位置,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一张像下面这样的桌子： <div class="posts" style="height: 800px; width:330px; overflow:scroll;" > <table class="price" id="price" cellpadding="10px" border="1"> // some stuff </table> </div> //一些

我有一张像下面这样的桌子：

<div class="posts" style="height: 800px; width:330px; overflow:scroll;" >
         <table class="price" id="price" cellpadding="10px" border="1">
                // some stuff    

         </table>
</div>


//一些东西

我想通过使用Javascript或jQuery将div集中到表的特定行。因此，如果函数被调用，用户将看到div块中间的行。

我该怎么做？谢谢

基本上，您可以获得要滚动到的单元格（

）或行（

）的引用。然后，您只需调用该元素的scrollIntoView方法

即

这里有一个简单的例子，请注意，我只是按数字定位所需的行-您很可能希望以不同的方式选择目标元素。另外，请注意，创建了20行，因此有效输入的范围为[0..19]-选择19将滚动直到第19行可见-尽管它位于div的底部，而不是顶部。我想，如果您确实需要滚动所选行以使其位于div的顶部，您可以在表之后添加一些

元素

HTML:

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

window.addEventListener('load', mInit, false);

function mInit()
{
    var tbl = makeTable(20, 5);
    byId('scrollMe').appendChild(tbl);

    byId('doScrollBtn').addEventListener('click', onScrollBtnClick, false);
}

function onScrollBtnClick()
{
    var tbl = byId('demoTable');
    var rowNum = byId('scrollRowInput').value;
    var selectedRow = tbl.rows[rowNum];
    selectedRow.scrollIntoView();
}

function makeTable(numRows, numCols)
{
    var x, y, tbl, row, cell;
    tbl = newEl('table');
    tbl.id = 'demoTable';
    for (y=0; y<numRows; y++)
    {
        row = newEl('tr');
        for (x=0; x<numCols; x++)
        {
            cell = newEl('td');
            cell.appendChild( newTxt("Cell: " + x + ", " + y) );
            row.appendChild(cell);
        }
        tbl.appendChild(row);
    }
    return tbl;
}

</script>
<style>
#scrollMe
{
    height: 150px;
    border: solid 1px red;
    overflow-y: scroll;
}
</style>
</head>
<body>
    <div id='scrollMe'></div>
    <input id='scrollRowInput'/><button id='doScrollBtn'><-- Scroll to this row</button>
</body>
</html>


函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
window.addEventListener（'load'，mInit，false）；
函数mInit（）
{
var-tbl=makeTable（20,5）；
byId（'scrollMe'）.appendChild（tbl）；
byId（'doScrollBtn'）。addEventListener（'click'，onScrollBtnClick，false）；
}
函数onScrollbtnlick（）
{
var tbl=byId（“可降级”）；
var rowNum=byId（'scrollRowInput'）。值；
var selectedRow=tbl.rows[rowNum]；
selectedRow.scrollIntoView（）；
}
函数makeTable（numRows、numCols）
{
变量x、y、tbl、行、单元格；
tbl=newEl（“表格”）；
tbl.id=‘可降级’；
对于（y=0；y也许jQuery scrollTop可以帮助您实现这一点。请检查下面的代码，最后您将找到指向工作示例的链接：
JavaScript
$(document).ready(function(){
    // Count rows
    var length = $('tr', $('.price')).not('tr:first').length;
    // Build links to rows from row 1 (to ignore table header)
    for( i=1; i <= length; i++ ) {
        $('.pages').append('<a class="linkrow" href="'+i+'">Row '+i+'</a> | ');
    }
    // On click
    $('a.linkrow').on('click',function(e){
        // Prevent default
        e.preventDefault();
        // Get row index from link href
        var rowId = $(this).attr('href');
        // Get row position by index
        var ypos = $('.price tr:eq('+rowId+')').offset().top;
        // Go to row
        $('.posts').animate({
            scrollTop: $('.posts').scrollTop()+ypos
        }, 500);
        // Some CSS to visualize which row is being viewed
        $('.price tr').css({'background-color': 'none'});
        $('.price tr:eq('+rowId+')').css({ 'background-color': '#ccc' } );
    });
});

$（文档）.ready（函数（）{
//数行
变量长度=$（'tr'，$（'.price'））。不是（'tr:first'）。长度；
//生成指向第1行中的行的链接（忽略表头）
对于（i=1；i
$(document).ready(function(){
    // Count rows
    var length = $('tr', $('.price')).not('tr:first').length;
    // Build links to rows from row 1 (to ignore table header)
    for( i=1; i <= length; i++ ) {
        $('.pages').append('<a class="linkrow" href="'+i+'">Row '+i+'</a> | ');
    }
    // On click
    $('a.linkrow').on('click',function(e){
        // Prevent default
        e.preventDefault();
        // Get row index from link href
        var rowId = $(this).attr('href');
        // Get row position by index
        var ypos = $('.price tr:eq('+rowId+')').offset().top;
        // Go to row
        $('.posts').animate({
            scrollTop: $('.posts').scrollTop()+ypos
        }, 500);
        // Some CSS to visualize which row is being viewed
        $('.price tr').css({'background-color': 'none'});
        $('.price tr:eq('+rowId+')').css({ 'background-color': '#ccc' } );
    });
});