关于使用JQ scrollTop方法进行滚动定位
沒圖我說個(gè)錘子,先來個(gè)自拍鎮(zhèn)樓。
又到了每周周五總結(jié)時(shí)間。我廣州劉德華又來講故事了。這一周沒啥任務(wù),就一個(gè)任務(wù),產(chǎn)品口頭交代了兩句,也沒有psd沒有設(shè)計(jì)圖沒有樣式。自由發(fā)揮,你自己敲代碼做個(gè)作品出來。
what?聽到這個(gè)的時(shí)候我是一臉懵逼。我心里很慌,難道我資深射雞濕和靈魂畫家的身份暴露了?心里不禁感嘆,唉,是金子哪里都會發(fā)光。
扯太遠(yuǎn)了,先來總結(jié)一下今天要寫的東西吧。jquery的scrollTop方法,這是啥子,那就先來一波自我介紹
1、scrollTop() 方法返回或設(shè)置匹配元素的滾動條的垂直位置。
2、scroll top offset 指的是滾動條相對于其頂部的偏移。
如果該方法未設(shè)置參數(shù),則返回以像素計(jì)的相對滾動條頂部的偏移。直接上例子吧
$(document).ready(function(){
$("button1").click(function(){
$("body").scrollTop(100);
});
});
這個(gè)東西其實(shí)很常見,比如在瀏覽頁面時(shí),頁面有5大塊。那么你想直接從第一塊跳轉(zhuǎn)到第5塊瀏覽,那么這個(gè)東西就可以用了,在scrollTop方法中設(shè)置一個(gè)參數(shù),也就是選中元素距離頁面頂部的距離。
上面的代碼,當(dāng)我們點(diǎn)擊button1時(shí),頁面會往下移動100px;那換成div呢,其實(shí)是一樣的。就是滾動條往下走100px。
還有就是在網(wǎng)頁中有很多返回頂部按鈕,通過這個(gè)方法也可以實(shí)現(xiàn)
$('body,html').animate({scrollTop:0},500),這里結(jié)合了animate()方法,另一種則是$(window).scrollTop(0)
更多專業(yè)前端知識,請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔為你收集整理的关于使用JQ scrollTop方法进行滚动定位的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JS之setTimeOut与clearT
- 下一篇: jQuery数据转换与提交