reactjs 页面平滑跳转

<pre>
<code>
const scrollTarget = 0

const smoothScrollVertical = () => {
let startScroll = null
let currentTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

const step = 7
let scrollBottom =  document.body.scrollHeight - currentTop - document.documentElement.clientHeight
console.log(currentTop,scrollBottom)
if(Math.abs(currentTop - scrollTarget) <= 1.1){
    cancelAnimationFrame(startScroll)
    console.log("finish")
    return
}
if(currentTop > scrollTarget){
    // current positon is below target, up

    startScroll = window.requestAnimationFrame(smoothScrollVertical)
    window.scrollTo(0, currentTop + Math.min((scrollTarget - currentTop)/step, -1))
    if(currentTop == 0){
        cancelAnimationFrame(startScroll)
        console.log("finish")
        return
    }
}
else if(currentTop < scrollTarget){
    // current positon is up to target down
    startScroll = window.requestAnimationFrame(smoothScrollVertical)
    window.scrollTo(0, currentTop + Math.max((scrollTarget - currentTop)/step, 1))
    if(scrollBottom <= 1.1){
        cancelAnimationFrame(startScroll)
        console.log("finish")
        return
    }
}

}
</code>
</pre>
使用的时候只要设定scrollTarget的值然后调用smoothScrollVertical即可
<pre>
<code>
let height = document.getElementById("techIntroduction").offsetTop - 60
scrollTarget = height
smoothScrollVertical()
</code>
</pre>
具体的效果请见:http://www.aqrose.com
阿丘科技官网使用该技术进行页面不同部分的平滑跳转

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容