<div class="go-top">
? ? ? <button @click="goTop" ref="btn" title="回到頂部">
? ? ? ? <i class="iconfont icongoTop"></i>
? ? ? </button>
? ? </div>
let timer = null;
data() {
? ? return {
? ? ?isTop: true
? ? };
? },
? watch: {},
? mounted: function() {
? ? 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
? ? ? ? console.log(osTop,clientHeight/3);
? ? ? ? if (osTop >= clientHeight/3) {
? ? ? ? ? obtn.style.display = 'block'
? ? ? ? } else {
? ? ? ? ? obtn.style.display = 'none'
? ? ? ? }
? ? ? ? if (!this.isTop) {
? ? ? ? ? clearInterval(this.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);
? ? }
? },
.go-top {
? width: 100%;
? button {
? ? width: 50px;
? ? height: 50px;
? ? border-radius: 50%;
? ? position: fixed;
? ? right: 40px;
? ? bottom: 100px;
? ? border: none;
? ? display: none;
? ? i{
? ? ? font-size: 0.6rem;
? ? }
? }
}
//謹(jǐn)記一? ? 檢查父級(jí)高度是否有限制??
//謹(jǐn)記二???檢查父級(jí) overflow: hidden;是否有限制?
