index.tsx
import './index.less'
import { Component } from 'react'
interface Props {
}
interface State {
}
class GoTop extends Component<Props, State>{
n: number = 0;
start: number = 0;
time: number = 1000;
count: number = 0;
dis: number = 0;
iTarget: number = 0;
timer: NodeJS.Timeout | null = null;
a:number=0;
cur:number=0;
constructor(props: Props) {
super(props);
this.state = {}
}
//未进行封装的
// goTop(){
// if(this.timer){
// clearInterval(this.timer);
// }
// this.n=0;
// this.count=Math.floor(this.time/30);
// this.start=document.documentElement.scrollTop;
// this.dis=this.iTarget-this.start;
// this.timer=setInterval(()=>{
// this.n++;
// // this.a=this.n/this.count;//匀速
// this.a=1-this.n/this.count;//先快后慢
// // this.cur=this.start+this.dis*this.a;
// //越来越快
// // this.cur=this.start+this.dis*Math.pow(this.a,3);
// this.cur=this.start+this.dis*(1-Math.pow(this.a,3));//先快后慢
// document.documentElement.scrollTop=this.cur;
// console.log(this.dis);
// if(this.n===this.count){
// if(this.timer){
// clearInterval(this.timer)
// }
// }
// },30)
// }
goTop(){
if(this.timer){
clearInterval(this.timer);
}
this.n=0;
this.count=Math.floor(this.time/30);
this.start=document.documentElement.scrollTop;
this.dis=this.iTarget-this.start;
this.timer=setInterval(this.FnSetInterval.bind(this),30)
}
FnSetInterval(){
this.n++;
// this.a=this.n/this.count;//匀速
this.a=1-this.n/this.count;//先快后慢
// this.cur=this.start+this.dis*this.a;
//越来越快
// this.cur=this.start+this.dis*Math.pow(this.a,3);
this.cur=this.start+this.dis*(1-Math.pow(this.a,3));//先快后慢
document.documentElement.scrollTop=this.cur;
console.log(this.dis);
if(this.n===this.count){
if(this.timer){
clearInterval(this.timer)
}
}
}
render() {
return (<div>
<div className="go-top" onClick={this.goTop.bind(this)}>返回顶部</div>
<div className="list">1</div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list">2</div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list">3</div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list"></div>
<div className="list">4</div>
<div className="list"></div>
</div>)
}
}
export default GoTop;
index.less
.list:nth-child(2n){
width: 100vw;
height: 100px;
background: red;
}
.list:nth-child(2n-1){
width: 100vw;
height: 100px;
background: blue;
}
.go-top{
position: fixed;
bottom: 100px;
right: 50px;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background: aqua;
color: #fff;
font-size: 20px;
}