服务器之家

服务器之家 > 正文

vue实现移动端返回顶部

时间:2021-10-22 15:01     来源/作者:秃头_08

本文实例为大家分享了vue实现移动端返回顶部的具体代码,供大家参考,具体内容如下

HTML:

?
1
2
3
4
5
6
7
8
<template>
 <div class="home">
  <div v-for="ys in 100" :key="ys">
   <p>1</p>
  </div>
  <div @click="back" class="back1" v-show="isShow">▲</div>
 </div>
</template>

JS:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
export default {
 data() {
  return {
   isShow: true
  };
 },
 
 handleScroll() {// handleScroll 和 methods 是同级
   if (window.pageYOffset > 300) {
    //window.pageYOffset:获取滚动距离
    this.isShow = true;
   } else {
    this.isShow = false;
   }
   // console.log(window.pageYOffset);
  },
 
 methods: {
  //点击事件:
  back() {
   //返回顶部 $这个地方需要引入在线jq
   //<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   $("html")
    .stop()
    .animate(
     //animate:动画 点击时让它行动
     {
      scrollTop: 0 //距离顶部为0
     },
     1000 //多少时间完成行动
    );
  }
 }
};
</script>

CSS:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<style scoped>
.back1 {
 width: 50px;
 height: 50px;
 background: #eee;
 position: fixed;
 right: 5px;
 bottom: 50px;
 z-index: 1000;
 text-align: center;
 line-height: 50px;
}
</style>

之前小编看到的一篇文章分享给大家:Vue实现返回顶部按钮

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<template>
 <div class="scrollTop">
  <div class="backTop"
      @click="backTop">
    <button v-show="flag_scroll">
          返回顶部
    </button>
   </div>
   //数据源
   <div></div>
  </div>
</template
<script>
export default {
 name: 'scrollTop',
 data() {
  return {
 
   flag_scroll: false,
   scroll: 0,
  }
 },
 computed: {},
 methods: {
 //返回顶部事件
  backTop() {
   document.getElementsByClassName('scrollTop')[0].scrollTop = 0
  },
  //滑动超过200时显示按钮
  handleScroll() {
   let scrollTop = document.getElementsByClassName('scrollTop')[0]
    .scrollTop
    console.log(scrollTop)
   if (scrollTop > 200) {
    this.flag_scroll = true
   } else {
    this.flag_scroll = false
   }
  },
 },
 mounted() {
  window.addEventListener('scroll', this.handleScroll, true)
 },
 created() { },
}
</script>
 
<style scoped>
.scrollTop{
 width: 100%;
 height: 100vh;
 overflow-y: scroll;
}
.backTop {
 position: fixed;
 bottom: 50px;
 z-index: 100;
 right: 0;
 background: white;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/weixin_46071217/article/details/106996181

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部