做一个点击回到顶部的效果,因为是小白所以对于这个效果,具体的思路就是,判断浏览器的类型,然后获取window.scrollTop值,并且设置一个target值,通过定时器每次递减这个值,如果window.scrollTop为0则点击无效。具体代码:
<style type="text/css">
#ts{
width: 100%;
height: 200px;
border:1px solid #000;
background: green;
}
#input{
position: fixed;
bottom: 0;
left: 0;
width: 100px;
height: 50px;
}
</style>
<div id="ts">111</div>
<div id="ts">111</div>
<div id="ts">111</div>
<div id="ts">111</div>
<div id="ts">111</div>
<div id="ts">111</div>
<input type="button" name="" value="点击我" id="input">
window.onload = function () {
// 获取点击dom节点
var Input = document.getElementById("input")
// 点击触发事件调用
Input.onclick = function () {
scroll(20)
}
// 每次递减滚动
function scroll(targertop) {
var top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
var timer = null
// 判断获取的值是不是数字,并且是大于0才触发定时器
if (!isNaN(top) && top > 0){
timer = setInterval(function () {
top -= targertop
if (top<=0) {
clearInterval(timer)
}
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = top
} else {
document.body.scrollTop = top
}
},10)
}
}
}
在测试了之后,页面是有效果的。