返回顶部和页面吸底

返回顶部和页面吸底

1、返回顶部

图例

结构

<div
     :style="  {opacity:num}"
     class="stair-bottom"
     @mouseenter="enterD()"
     @mouseleave="leaveD()"
     >
    <div class="top-a" @click="returnTop">
        <span class="stb-set">
            <span v-if="green">
                <img class="stb-img" src="../../assets/images/top.png" alt />
            </span>
            <span v-if="!green">
                <img class="stb-img" src="../../assets/images/top-l.png" alt />
            </span>

            <!-- <span class="stb-name">返回顶部</span> -->
        </span>
    </div>
</div>

数据

data(){
    return{
        green: true,
    }
}

 mounted() {
  // let routes = this.$router.options.routes(
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`
    // )
    window.addEventListener('scroll', this.scrollToTop)
 }
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },

方法

methods:{
    enterD() {
        this.green = false
    },
   leaveD() {
        this.green = true
   },
           returnTop() {
      content.scrollIntoView()
    },
    // // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    // backTop() {
    //   const that = this
    //   let timer = setInterval(() => {
    //     let ispeed = Math.floor(-that.scrollTop / 5)
    //     document.documentElement.scrollTop = document.body.scrollTop =
    //       that.scrollTop + ispeed
    //     if (that.scrollTop === 0) {
    //       clearInterval(timer)
    //     }
    //   }, 16)
    // },
    // // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        // that.btnFlag = true
        that.num = 1
      } else {
        // that.btnFlag = false
        that.num = 0
      }
    },
}

样式

.stair-bottom {
    // 固定定位
    position: fixed;
    // float: right;
    // bottom: 0px;
    top: 601px;
    right: 12px;
    // width: 50px;
    // height: 122px;
    width: 40px;
    height: 50px;
    background: #ffffff;
    cursor: pointer; /*鼠标悬停变小手*/
    // opacity: 0.5;
    z-index: 1000000;
    // border-bottom: 1px solid #ddd;
    .top-a {
        // height: 122px;
        height: 50px;
        width: 40px;
        color: red;

        // border-bottom: 1px solid #ddd;
        // background: green;
        display: flex;
        flex-direction: row; /* 子元素横向排列 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        .stb-set {
            .stb-img {
                width: 30px;
                height: 30px;
            }
            .stb-name {
                display: block;
                width: 28px;
                height: 40px;
                font-size: 14px;
                color: #555555;
                text-align: center;
                // 字体
                // font-family: PingFang;
            }
        }
    }
}
.stair-bottom:hover {
    opacity: 1;
    .top-a {
        .stb-name {
            color: #0084ff;
        }
    }
}

2、页面吸底

结构

  <el-container class="home-container">
      <el-header>
      </el-header>
      <el-main>
            <!-- 二级路由对应组件渲染位置  style="min-height:825px" -->
          <div class="content">
            <!--  @input="fn" -->
            <router-view @input="fn"></router-view>
          </div>
      </el-main>
       <!-- style="min-height:40px" -->
      <el-footer style="height: 96px;" class="el-f">
      </el-footer>
  </el-container>

样式

.home-container {
  background: #f7f8fa;
  width: 100%;
  // 页面吸底
  min-height: 100vh;
  position: absolute;
  // 字体
  font-family: PingFang;
  left: 0;
  top: 0;
  padding: 0;
     .el-main {
    padding: 0px;
    margin: 0px;
    padding-bottom: 30px;
    // 页面吸底
    min-height: 87vh;
    // position: absolute;
    // background: #f8f8f8;
    .content {
      width: 1180px;
      // height: 100%;
      min-height: 80vh;
      margin: 0 auto;
      background: #f7f8fa;
      // 测试颜色
      // background: #c1ffc1;
    }
  }
}