jQuery滚动到页面指定位置

文章作者:Tyan
博客:noahsnail.com

        在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍jQuery函数中的一个小trick,.focus()函数。

        先来看一下jQuery的官方文档:

image

image

        上面的文档扯了一堆,半点没看到页面跳转的影子,但是在实际应用中你会发现,如果一个控件调用了.focus()方法,页面会自动跳转到控件所在位置。

        举例说明:

image

        如图,这是一个pop up,modal,如果你选中了某一条数据,你想再打开这个pop up时页面直接跳转到选中的这条数据的位置,用.focus()可以这么写:

1
$('input[name=test]:checked').focus();

test是一堆radio的name,:checked代表查找被选中的那个radio,focus()方法会直接将页面跳转到被选中的这条数据的位置。

注:focus方法使用有个前提,那就是控件不能是disabled,如果控件要设为disabled,那要在控件被disabled之前调用focus方法。

感谢教我这个小trick的Lucas!

如果有收获,可以请我喝杯咖啡!