jquery操作滚动条滚动到指定位置[附在线实例]推荐 亲测 原创 收藏

文章标签: 滚动条
  • :
  • 05-10 23:41
  • :
  • 186次
  • :
  • 0条
  • 4赞

简介本文讲的是在jquery里操作滚动条滚动到指定位置的方法及在线实例。l

在jquery里,我们要操作滚动条滚动到指定的位置,是非常简单的,方法如下:

$("html,body").scrollTop($("#aijquery2").offset().top);

上面这句代码的意思就是操作窗口的滚动条,滚动到ID为aijquery2元素的位置,不过这句代码实现的效果是滚动条“瞬间”滚动过去的,所以日常中,我们通常给他加上一个滚动的“动画过程”:

$("html,body").animate({scrollTop:$("#aijquery2").offset().top},1000);

animate就是jquery里实现动画效果的函数了。


下面是站长给大家准备的在线实例演示:

jquery操作滚动条的在线演示

上面我们操作的是整个网页窗口的滚动条,那么如果我们要操作某个DIV的滚动条,也是同样的方法,把上面代码中的$("html,body")换成$("div#id")就行了。

下面站长再来说一个操作滚动条的实例,就是操作滚动条滚动到底部:

$("#aijquery2").animate({scrollTop:$("#aijquery2")[0].scrollHeight},500);

上面这句代码说的是操作div#aijquery2的滚动条滚动到底部,这时我们需要获取div#aijquery2的scrollHeight高度,而在jquery里是没有这个属性方法的,所以我们需要把jquery对象转换成js对象,才能获取到scrollHeight。

另外,我们也可以用jquery的prop函数来直接获取元素的js属性:

$("#aijquery2").animate({scrollTop:$("#aijquery2").prop("scrollHeight")},500);


PS:jquery对象与dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 09:50:45