[removed] Scroll to nth row in a table?

前端 未结 5 914
暖寄归人
暖寄归人 2020-12-30 05:21

Using either pure Javascript or jQuery, how do I scroll the page so that the nth row in a table is centered on the page?

Some examples I\'ve seen that have this sort

5条回答
  •  暖寄归人
    2020-12-30 06:05

    Latest update (no-jquery for for modern browsers)

    var rows = document.querySelectorAll('#tableid tr');
    
    // line is zero-based
    // line is the row number that you want to see into view after scroll    
    rows[line].scrollIntoView({
        behavior: 'smooth',
        block: 'center'
    });
    

    Demo at http://jsfiddle.net/r753v2ky/


    Since you can use jQuery here it is..

    var w = $(window);
    var row = $('#tableid').find('tr').eq( line );
    
    if (row.length){
        w.scrollTop( row.offset().top - (w.height()/2) );
    }
    

    Demo at http://jsfiddle.net/SZKJh/


    If you want it to animate instead of just going there use

    var w = $(window);
    var row = $('#tableid').find('tr').eq( line );
    
    if (row.length){
        $('html,body').animate({scrollTop: row.offset().top - (w.height()/2)}, 1000 );
    }
    

    Demo at http://jsfiddle.net/SZKJh/1/

提交回复
热议问题