美文网首页
关于移动端的js滚动动画

关于移动端的js滚动动画

作者: 三哥_bd82 | 来源:发表于2019-08-16 18:13 被阅读0次

很多时候我们需要用到那种侧边的导航,点击滚动到目标元素。这里由于是移动端,没有使用jq的animation。

所以自己写了一个原生的滚动动画,只有两个参数,简单易用,代码也比较简单。

下面贴代码:


/*原生js实现的滚动动画,当不能使用jq滚动时候使用这个代替。

*name为传入的id,

*sudu为滚动的速度,两个参数,fast与slow;主要就是通过定时器实现滚动动画

**/

function scrollAni(name,speed) {

var obj = {

'fast':1,

'slow':10,

};

var cur = document.documentElement.scrollTop || document.body.scrollTop;

var target = document.getElementById(name).offsetTop;

//获取了当前位置,根据当前位置计算进行滚动;

var needScroll,timer;

console.log(cur);

timer = setInterval(() => {

needScroll = target - cur;

if(needScroll < 0) {

cur -= 20;

window.scrollTo(0, cur);

} else if(needScroll > 20) {

cur += 20;

window.scrollTo(0, cur);

} else {

window.scrollTo(0, target);

clearInterval(timer);

}

}, obj[speed])

}

相关文章

网友评论

      本文标题:关于移动端的js滚动动画

      本文链接:https://www.haomeiwen.com/subject/hugqsctx.html