原生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文字向左运动

var

marqueewidth=350

var

marqueeheight=22

var

speed=5

var

marqueecontents='欢迎光临脚本之家

网页特效栏目，精品特效全收罗！'

if

(document.all)

document.write(''+marqueecontents+'')

function

regenerate(){

window.location.reload()

}

function

regenerate2(){

if

(document.layers){

setTimeout("window.onresize=regenerate",450)

intializemarquee()

}

}

function

intializemarquee(){

document.cmarquee01.document.cmarquee02.document.write(''+marqueecontents+'')

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.width

scrollit()

}

function

scrollit(){

if

(document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){

document.cmarquee01.document.cmarquee02.left-=speed

setTimeout("scrollit()",100)

}

else{

document.cmarquee01.document.cmarquee02.left=marqueewidth

scrollit()

}

}

window.onload=regenerate2

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]