document.body.scrollTop = 0
document.documentElement.scrollTop = 0
这是最简单的实现方式，如果想要添加上动画效果的话，就需要使用到下面的代码了
<body>
<div class="box">
<img src="./img/gaya.png" alt="">
</div>
<a href="javascript:;" id="btn"></a>
<script type="text/javascript" src="./index.js"></script>
</body>
window.onload = function(){
var timer = null;
var obtn = document.getElementById('btn')
var isTop = true;
window.onscroll = function(){
if(!isTop){
clearInterval(timer)
}
isTop = false
}
obtn.onclick = function(){
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
isTop = true
if(osTop == 0){
clearInterval(timer)
}
},30)
}
}
基本的结构，已经能够实现想要的操作了，包括在滚动动画的时候，停止动画
在看视频的时候，发现了一个第一屏，第二屏的概念，一开始我所设置的回到顶部按钮的显示与隐藏都是很随意的，第一屏、第二屏的概念显得很专业。
window.onload = function(){
var clientHeight = document.documentElement.clientHeight;
var timer = null;
var obtn = document.getElementById('btn')
var isTop = true;
//滚动条滚动时触发
window.onscroll = function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if(osTop >= clientHeight){
obtn.style.display = 'block';
}else{
obtn.style.display = 'none';
}
if(!isTop){
clearInterval(timer)
}
isTop = false
}
obtn.onclick = function(){
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
isTop = true
if(osTop == 0){
clearInterval(timer)
}
},30)
}
}
这是最全面的代码，在第一屏的时候不显示，在第二屏的时候显示。
原生的操作，再配合上算法的话，感觉很6啊，如果这些整不了的话，你永远都是一个普通的码农。
上面是原生的操作，接下来就是将这个操作整合到vue中，真正运用到实战中去。
<template lang="html">
<div class="go-top">
<div class="box">
<img src="./../assets/gaya.png" alt="">
</div>
<button @click="goTop" ref="btn" title="回到顶部"></button>
</div>
</template>
<script>
let timer = null
export default {
data () {
return {
isTop: true
}
},
mounted () {
this.needScroll()
},
methods: {
needScroll () {
let clientHeight = document.documentElement.clientHeight
let obtn = this.$refs.btn
window.onscroll = function () {
let osTop = document.documentElement.scrollTop || document.body.scrollTop
if (osTop >= clientHeight) {
obtn.style.display = 'block'
} else {
obtn.style.display = 'none'
}
if (!this.isTop) {
clearInterval(timer)
}
this.isTop = false
}
},
goTop () {
timer = setInterval(function () {
let osTop = document.documentElement.scrollTop || document.body.scrollTop
let ispeed = Math.floor(-osTop / 5)
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
this.isTop = true
if (osTop === 0) {
clearInterval(timer)
}
}, 30)
}
}
}
</script>
<style lang="scss" scoped>
.go-top{
width: 100%;
.box{
img{
float: left;
width: 100%;
}
}
button{
width: 50px;
height: 50px;
position: fixed;
right: 50px;
bottom: 50px;
border: none;
background-image:url('./../assets/goTop.png');
background-repeat: no-repeat;
background-size: cover;
display: none;
}
}
</style>
这是简单的整合后的代码，效果上是一模一样的，中间遇到了一个坑，计时器不能写在data中，在控制台上也可以看到，timer的值一直没变化，很奇怪的事情啊，话说这个timer到底是什么鬼！！！！
知识点，知识点！！！！！
<template lang="html">
<div class="go-top">
<div class="box">
<img src="./../assets/gaya.png" alt="">
</div>
<button @click="goTop" ref="btn" title="回到顶部"></button>
</div>
</template>
<script>
// let timer = null
export default {
data () {
return {
isTop: true,
timer: null
}
},
mounted () {
this.needScroll()
},
methods: {
needScroll () {
let clientHeight = document.documentElement.clientHeight
let obtn = this.$refs.btn
window.onscroll = function () {
let osTop = document.documentElement.scrollTop || document.body.scrollTop
if (osTop >= clientHeight) {
obtn.style.display = 'block'
} else {
obtn.style.display = 'none'
}
if (!this.isTop) {
clearInterval(this.timer)
}
this.isTop = false
}
},
goTop () {
let self = this
self.timer = setInterval(function () {
let osTop = document.documentElement.scrollTop || document.body.scrollTop
let ispeed = Math.floor(-osTop / 5)
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
self.isTop = true
if (osTop === 0) {
clearInterval(self.timer)
}
}, 30)
}
}
}
</script>
<style lang="scss" scoped>
.go-top{
width: 100%;
.box{
img{
float: left;
width: 100%;
}
}
button{
width: 50px;
height: 50px;
position: fixed;
right: 50px;
bottom: 50px;
border: none;
background-image:url('./../assets/goTop.png');
background-repeat: no-repeat;
background-size: cover;
display: none;
}
}
</style>
let self = this这句代码偶尔会在别人的项目中看到，今天终于是遇到了，amazing，上面是我想要的代码结构，最完美的相识，对比了下别人的代码，还是我的这段代码更加简洁，amazing
！！！！！！！！！！！！！！
goTop () {
this.timer = setInterval(() => {
let osTop = document.documentElement.scrollTop || document.body.scrollTop
let ispeed = Math.floor(-osTop / 5)
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
this.isTop = true
if (osTop === 0) {
clearInterval(this.timer)
}
}, 30)
}
其实，直接使用箭头函数的话，就可以直接使用this了
今天的收获还是很大的，就一个简单的回到顶部，就踩了这么多的坑，happy
说到底还是自己的es6还不怎么弄的清楚，boy，需要加油了。
网友评论