zoukankan      html  css  js  c++  java
  • js中 scrollTo()用法

    1.场景:进入页面上面是五个导航栏,内容部分是一段很长很长很长很长...的文字说明,点击某一个按钮精确定位到内容的小标题处

    2.上代码html部分

      <a-menu v-model="current" mode="horizontal">
                <a-menu-item
                  class="fangkong shifted"
                  @click="toteg('prevention')"
                  key="prevention"
                >疫情防控动态</a-menu-item>
                <a-menu-item class="fangkong shifted" @click="toteg('qushi')" key="qushi">趋势分析</a-menu-item>
                <a-menu-item class="fangkong shifted" @click="toteg('fenbu')" key="fenbu">病例人员分布</a-menu-item>
                <a-menu-item class="fangkong shifted" @click="toteg('chuzhi')" key="chuzhi">异常人员处置</a-menu-item>
                <a-menu-item class="fangkong shifted" @click="toteg('admap')" key="admap">疫情区域地图</a-menu-item>
              </a-menu>
    

    3.js部分

      toteg(item) {
          var id = "#" + item;
          let idItem = document.getElementById(item);
          let anchor = this.$el.querySelector(id); //计算传进来的id到顶部的距离
          this.$nextTick(() => {
            // console.log(anchor.offsetTop)
            window.scrollTo(0, anchor.offsetTop - 130);  //滚动距离因为导航栏固定定位130px的高度
          });
        },

     4.小tips:入口文件加上这句会让滚动更加丝滑哟

    #app{
      scroll-behavior: smooth;
    } 
    

      

  • 相关阅读:
    shell 默认变量
    diff 实现
    AWK变量
    docker-bridge network
    docker--linux network namespace
    docker-container 操作
    docker--shell和Exec格式
    docker--build自己的image
    docker--container
    docker--删除container和image
  • 原文地址:https://www.cnblogs.com/cb1490838281/p/12699474.html
Copyright © 2011-2022 走看看