原生javascript如何实现回到顶部平滑滚动?

JavaScript016

原生javascript如何实现回到顶部平滑滚动?,第1张

// 设置准备要滚动的元素

let p = document.getElementById('userDetailContent').parentNode

// 该元素目前 顶部 被卷起(隐藏)的高度

let t = p.scrollTop

// 这段匀速运动 分30步来走, step:每一步走的距离

let step = Math.floor(t / 30)

if( step > 1)  //一步最少要走1个像素,否则无限触发滚动

    (function walkTop(t) {

        setTimeout(()=>{

            // scrollTo( x轴滚动, y轴)

            p.scrollTo(0, t -= step) // 走一步, 将剩余路程 减去一步的路程的结果

            if(t<0) return // 停止迭代循环

            walkTop(t)//迭代

        },1)// 每毫秒走一步

    })(t) // 自执行函数 传入参数t ,!important

主要思路是:鼠标当前点到下一点直接间隔计算出速度。这样就实现了惯性滑动效果。

下面是简单的js代码实现:仅供参考:

<style>    

#div1{ width:100px height:100px background:red position:absolute left:0px top:0}    

</style>    

<script>    

window.onload=function(){    

var oDiv=document.getElementById('div1')    

var iSpeedX=0    

var iSpeedY=0     

var lastX=0    

var lastY=0    

var timer=null     

oDiv.onmousedown=function(ev){    //div的鼠标按下事件,主要计算鼠标当前位置,和移动位置。这样可以计算出鼠标移动速度。

var oEvent=ev || event    

var disX=oEvent.clientX-oDiv.offsetLeft    

var disY=oEvent.clientY-oDiv.offsetTop      

clearInterval(timer)      

document.onmousemove=function(ev){   //鼠标拖动事件。 

var oEvent=ev || event     

oDiv.style.left=oEvent.clientX-disX+'px'    

oDiv.style.top=oEvent.clientY-disY+'px'    

iSpeedX=oEvent.clientX-lastX    

iSpeedY=oEvent.clientY-lastY     

lastX=oEvent.clientX    

lastY=oEvent.clientY

}    

document.onmouseup=function(){    //当鼠标抬起后,清掉移动事件。

document.onmousemove=null    

document.onmouseup=null

oDiv.releaseCapture && oDiv.releaseCapture()      

startMove()    

}    

oDiv.setCapture && oDiv.setCapture()    

return false

}         

function startMove(){    //移动函数,主要操作是计算鼠标移动速度和移动方向。

clearInterval(timer)    

timer=setInterval(function(){    

iSpeedY+=3    

var t=oDiv.offsetTop+iSpeedY    

var l=oDiv.offsetLeft+iSpeedX    

if(t>document.documentElement.clientHeight-oDiv.offsetHeight){    

t=document.documentElement.clientHeight-oDiv.offsetHeight    

iSpeedY*=-0.8    

iSpeedX*=0.8

}     

if(t<0){    

t=0    

iSpeedY*=-0.8    

iSpeedX*=0.8

}    

if(l>document.documentElement.clientWidth-oDiv.offsetWidth){    

l=document.documentElement.clientWidth-oDiv.offsetWidth

    

iSpeedX*=-0.8    

iSpeedY*=0.8    

}    

if(l<0){    

l=0    

iSpeedX*=-0.8    

iSpeedY*=0.8

    

}    

    

oDiv.style.left=l+'px'    

oDiv.style.top=t+'px'    

    

if(Math.abs(iSpeedX)<1)iSpeedX=0    

if(Math.abs(iSpeedY)<1)iSpeedY=0    

if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){    

clearInterval(timer)    

}    

document.title=i++    

},30)

}    

}    

</script>    

</head>    

<body>    

<div id="div1"></div>    

</body>