js锚点

image.png

<template>
  <div class="dd">
    <div class="aaa" id="d1" style="background: palevioletred">顶部</div>
    <div class="aaa" id="d2" style="background: paleturquoise">采购偏好分析</div>
    <div class="aaa" id="d3" style="background: palegoldenrod">销售情况</div>
    <div class="aaa" id="d4" style="background: palegreen">下游客户分析</div>
    <div class="aaa" id="d5" style="background: peru">信用情况</div>


    <div class="sp" :class="{'spAct': spAct}" @mouseenter="spAct = true" @mouseleave="spAct = false">
      <div class="hoverBtn">
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="maodian">
        <div @click="goto('#d1')">顶部</div>
        <div @click="goto('#d2')">采购偏好分析</div>
        <div @click="goto('#d3')">销售情况</div>
        <div @click="goto('#d4')">下游客户分析</div>
        <div @click="goto('#d5')">信用情况</div>
        <div @click="goto('top')" class="toTop">
          <span class="el-icon-caret-top"></span>
          <span>返回顶部</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "goTop",
  data() {
    return {
      spAct: false,
    }
  },
  methods: {
    goto(dom) {
      let top = 0
      if (dom !== 'top') {
        top = document.querySelector(dom).offsetTop
      }
      window.scrollTo({
        top: top,
        behavior: 'smooth',
      })
    }
  },
}
</script>

<style scoped>
.aaa{
  height: 500px;
  width: 500px;
  border: 1px solid;
}
.sp{
  position: fixed;
  z-index: 99;
  background: #ffffff;
  top:40%;
  right: -80px;
  transition: right 0.3s;
}
.spAct {
  right: 0;
}
.hoverBtn{
  display: inline-block;
  vertical-align: top;
  width: 16px;
  margin-left: -16px;
  height: 32px;
  line-height: 32px;
  color: #ffffff;
  background: #38a0fe;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.maodian{
  display: inline-block;
  width: 80px;
}
.maodian div{
  display: block;
  padding: 11px;
  font-size: 14px;
  text-align: center;
  color: #666666;
  border: 1px solid #f5f5f5;
  margin-bottom: -1px;
}
.maodian div:hover{
  color: #38a0fe;
}
.maodian div:first-child{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.maodian div:last-child{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.toTop{
  color: #ffffff!important;
  background: #38a0fe;
}
.toTop span{
  display: block;
}
.toTop:hover{
  color: #ffffff!important;
}
</style>