html css JS 怎么设计点击回顶部效果?

html-css017

html css JS 怎么设计点击回顶部效果?,第1张

点击回顶部,或是回某个位置,主要是设置scrollTop。

下面是一个简单回顶的例子:

下面的例子是缓慢回顶。如果将快速回顶,可以直接让scrollTop = 0;就可以了。

<style>    

body{height:5000px}    

input {position:fixed bottom:0px right:0px}    

</style>    

<script>    

window.onload=function(){    

var oBtn = document.getElementById('btn')    

var timer = null    

var bFlag = false    

oBtn.onclick=function(){    

moveScroll(0,3000)

    

}    

    

window.onscroll=function(){    

if(bFlag)    

{    

clearInterval(timer)    

}

bFlag=true    

}    

    

function moveScroll(target,time)    

{    

var start = document.documentElement.scrollTop || document.body.scrollTop    

var dis = target - start    

var count = Math.floor(time/30)    

var n=0    

    

clearInterval(timer)    

timer = setInterval(function(){    

n++    

bFlag=false    

document.documentElement.scrollTop = start + dis*n/count    

document.body.scrollTop = start+dis*n/count    

if(n==count)    

{    

clearInterval(timer)    

}

    

},30)    

}    

}    

</script>

function createTable(){

document.write("<table border='2' width='300' height='200'><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>")

}

<input type="button" value="生成" onclick="createTable()"/>

优先HTML+CSS。因为这是基础。在没学会JS之前可以从网上各种抄。而且Js的基础语法和C一样。高级功能又可以直接去JQuery里找。所以推荐先学CSS。

但是一个合格的前端代码设计师需要两个(其实还要更多)都掌握