猿问

原生js如何实现jQuery.animate中的scrollTop方法

网上找不到一个好的介绍来实现，

$('html, body').animate({
  scrollTop: 800}, 1000)

怎么控制这个scrollTop的 时间呢？


慕盖茨4494581
浏览 2670回答 1
1回答

qq_花开花谢_0

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Document</title></head><style>&nbsp; &nbsp; html{&nbsp; &nbsp; &nbsp; &nbsp; height : 200%;&nbsp; &nbsp; }&nbsp; &nbsp; #position{&nbsp; &nbsp; &nbsp; &nbsp; width : 100px;&nbsp; &nbsp; &nbsp; &nbsp; height : 100px;&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top : 100%;&nbsp; &nbsp; &nbsp; &nbsp; left: 80%;&nbsp; &nbsp; &nbsp; &nbsp; background: red;&nbsp; &nbsp; }</style><body >&nbsp; &nbsp; <div id="position"></div></body><script>&nbsp; &nbsp; (()=>{&nbsp; &nbsp; &nbsp; &nbsp; let pos = document.getElementById('position');&nbsp; &nbsp; &nbsp; &nbsp; pos.onclick = ()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let curr_top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let time_id = setInterval(()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; curr_top -= 10;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.body.scollTop = curr_top;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.scrollTop = curr_top;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(curr_top <= 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(time_id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } , 100);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })()&nbsp; &nbsp;&nbsp;</script></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答