精华内容
下载资源
问答
  • vue锚点跳转
    2022-07-11 14:00:41

    首先我通过直接的锚点跳转是实现不了滑动效果

    所以首先实现锚点的跳转效果

    先给点击的地方 设置一个点击事件

    <a @click="handleHref()">跳转</a>

    然后是被跳转的地方添加 class="industry"

     <a-row class="industry">要跳转到这里</a-row>

    接下来就是点击事件 通过offsetTop获取对象到窗体顶部的距离,然后赋值给scrollTop,就能实现锚点的功能 我用谷歌浏览器document.documentElement.scrollTop

    handleHref () {
          this.$nextTick(() => {
            const jump = document.querySelector('.industry')
            // 获取需要滚动的距离
            const total = jump.offsetTop
    
            // Chrome
             // document.body.scrollTop = total
            // Firefox
             document.documentElement.scrollTop = total
             // Safari
             // window.pageYOffset = total
          })
        },

    注意一点是本该各个浏览器应该是不同的 但是我再滑动的时候 出了点bug经过排查发现直接只用document.documentElement.scrollTop这个是可以的然后就没再深究了

    有大佬解答欢迎留言哈

    接下来是滑动效果 所谓的滑动本质就是将距离分为了50等分 每10ms跳一次 总共跳50次进而实现滑动效果 

    handleHref () {
          this.$nextTick(() => {
            const jump = document.querySelector('#industry')
            // 获取需要滚动的距离
            const total = jump.offsetTop
            // 获取网页被卷去的高
            let distance = document.documentElement.scrollTop
            console.log(document.documentElement.scrollTop)
            console.log(window.pageYOffset)
            console.log(document.body.scrollTop)
            // 平滑滚动,时长500ms,每10ms一跳,共50跳
            let step = total / 50
            console.log(distance, total)
    
            if (total >= distance) {
              smoothDown()
            } else {
              const newTotal = distance - total
              console.log(total, distance)
              step = newTotal / 50
              smoothUp()
            }
            function smoothDown () {
              if (distance < total) {
                distance += step
                document.body.scrollTop = distance
                document.documentElement.scrollTop = distance
                window.pageYOffset = distance
                setTimeout(smoothDown, 10)
              } else {
                document.body.scrollTop = total
                document.documentElement.scrollTop = total
                window.pageYOffset = total
              }
            }
            function smoothUp () {
              if (distance > total) {
                distance -= step
                document.body.scrollTop = distance
                document.documentElement.scrollTop = distance
                window.pageYOffset = distance
                setTimeout(smoothUp, 10)
              } else {
                document.body.scrollTop = total
                document.documentElement.scrollTop = total
                window.pageYOffset = total
              }
            }
          })
        },

     

    有什么别的问题欢迎咨询留言~~

    更多相关内容
  • import Vue from 'vue' var VueScrollTo = require('vue-scrollto'); Vue.use(VueScrollTo) 页面引用: <template> <div class="scrollDemo"> <div class="demoNav flex-center-center"> <

    安装:

    npm install --save vue-scrollto

    main.js引入

    import Vue from 'vue'
    var VueScrollTo = require('vue-scrollto');
    Vue.use(VueScrollTo)

    页面引用:

    <template>
      <div class="scrollDemo">
        <div class="demoNav flex-center-center">
          <div
            class="demoNavItem"
            v-for="(item,index) in demoNavItem"
            :key="index"
            :class="{navActive : idx==index}"
            @click="changNav(index)"
          >{{item}}</div>
        </div>
        <div class="demoContent">
            <!-- 如果内容为循环,id则定义为:id="'demoItem'+index" -->
          <div class="demoItem0 demoItem" id="demoItem0">谷歌浏览器内容</div>
          <div class="demoItem1 demoItem" id="demoItem1">uc浏览器内容</div>
          <div class="demoItem2 demoItem" id="demoItem2">IE浏览器内容</div>
          <div class="demoItem3 demoItem" id="demoItem3">火狐浏览器内容</div>
          <div class="demoItem4 demoItem" id="demoItem4">360浏览器内容</div>
          <div class="demoItem5 demoItem" id="demoItem5">猎豹浏览器内容</div>
        </div>
      </div>
    </template>
    <script>
    // 引入
    var VueScrollTo = require("vue-scrollto");
    export default {
      data() {
        return {
          idx: 0,
          demoNavItem: [
            "谷歌浏览器",
            "uc浏览器",
            "IE浏览器",
            "火狐浏览器",
            "360浏览器",
            "猎豹浏览器",
          ],
        };
      },
      methods: {
        // 导航选中效果
        changNav(index) {
          this.idx = index;
          VueScrollTo.scrollTo(document.getElementById("demoItem" + index), 1000, {
            offset: -50,
          });
        },
      },
    };
    </script>
    <style  scoped>
    
    .flex-center-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .demoNav {
        width: 100%;
        height: 70px;
        background: rgba(0, 31, 144, 1);
        position: sticky;
        left: 0;
        top: 0;
    }
    .demoNavItem {
      font-size: 40px;
      color: #fff;
      margin-left: 30px;
      cursor: pointer;
    }
    .navActive {
      color: red;
    }
    .demoItem {
      width: 100%;
      height: 600px;
      font-size: 60px;
      color: #fff;
      text-align: center;
      padding: 60px 0 0 0;
    }
    .demoItem0{
      background: gold;
    }
    .demoItem1 {
      background: red;
    }
    .demoItem2 {
      background: chartreuse;
    }
    .demoItem3 {
      background: cornflowerblue;
    }
    .demoItem4 {
      background: cyan;
    }
    .demoItem5 {
      background: darkmagenta;
    }
    </style>

    效果图:

    展开全文
  • 一个简单的vue锚点跳转demo 拿去直接粘贴就可 <template> <div class="anchor-point" > <!-- 按钮 --> <div class="operation-btn"> <div class="btn-item" v-for="(item, index) in...

    一个简单的vue锚点跳转demo

    拿去直接粘贴就可

    <template>
      <div class="auto-adjust-edit" >
        <!-- 按钮 -->
        <div class="operation-btn">
            <div class="btn-item" v-for="(item, index) in partList" :key="index" @click="jump(index)"
                :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
            </div>
        </div>
        <!-- 滚动区域 -->
        <div class="scroll-content" @scroll="onScroll">
          <div class="scroll-item">
              <div class="part-title">基本信息</div>
          </div>
          <div class="scroll-item">
              <div class="part-title">风险控制</div>
          </div>
          <div class="scroll-item">
              <div class="part-title">成本控制</div>
          </div>
          <div class="scroll-item">
              <div class="part-title">量级控制</div>
          </div>
          <div class="scroll-item">
              <div class="part-title">新计划管理</div>
          </div>
          <div class="scroll-item">
              <div class="part-title">老计划管理</div>
          </div>
          <div class="scroll-item">
              <div class="part-title">垃圾计划清理</div>
          </div>
        </div>
        
      </div>
    </template>
    <script>
    export default {
        data() {
            return {
                activeStep: 0,
                partList: ['基本信息', '风险控制', '成本控制', '量级控制', '新计划管理', '老计划管理', '垃圾计划清理']
            }
        },
        methods: {
            // 滚动触发按钮高亮
            onScroll (e) {
                let scrollItems = document.querySelectorAll('.scroll-item')
                for (let i = scrollItems.length - 1; i >= 0; i--) {
                    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                    let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 100;
                    if (judge) {
                        this.activeStep = i
                        break
                    }
                }
            },
            // 点击切换锚点
            jump (index) {
                let target = document.querySelector('.scroll-content')
                let scrollItems = document.querySelectorAll('.scroll-item')
                // 判断滚动条是否滚动到底部
                if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
                    this.activeStep = index
                }
                let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
                let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
                // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
                // 滚动动画实现, 使用setTimeout的递归实现平滑滚动,将距离细分为50小段,10ms滚动一次
                // 计算每一小段的距离
                let step = total / 50
                if (total > distance) {
                    smoothDown(document.querySelector('.scroll-content'))
                } else {
                    let newTotal = distance - total
                    step = newTotal / 50
                    smoothUp(document.querySelector('.scroll-content'))
                }
    
                // 参数element为滚动区域
                function smoothDown (element) {
                    if (distance < total) {
                        distance += step
                        element.scrollTop = distance
                        setTimeout(smoothDown.bind(this, element), 1)
                    } else {
                        element.scrollTop = total
                    }
                }
    
                // 参数element为滚动区域
                function smoothUp (element) {
                    if (distance > total) {
                        distance -= step
                        element.scrollTop = distance
                        setTimeout(smoothUp.bind(this, element), 1)
                    } else {
                        element.scrollTop = total
                    }
                }
                // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
                //   if (index === index1) {
                //     item.scrollIntoView({
                //       block: 'start',
                //       behavior: 'smooth'
                //     })
                //   }
                // })
            }
    
        }
    }
    </script>
    <style lang="scss" scoped>
      .auto-adjust-edit {
        flex-basis: 100%;
        display: flex;
        overflow: hidden;
        height: 500px;
        height: 100%;
        // 侧边栏
        .operation-btn {
            width: 9.5%;
            height: 95%;
            margin-right: 0.5%;
            padding-top: 1%;
            margin-top: 4px;
            background: white;
            border: 1px solid rgb(190, 188, 188);
            border-radius: 6px;
            box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
            .btn-item {
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                cursor: pointer;
            }
        }
        // 表单内容
        .scroll-content {
            height: 100%;
            width: 90%;
            overflow: auto;
            .scroll-item {
                background: white;
                border-radius: 8px;
                margin-bottom: 6px;
                border: 1px solid rgb(216, 214, 214);
                min-height: 300px;
                // 标题
                .part-title {
                    height: 40px;
                    line-height: 40px;
                    font-weight: 600;
                    padding-left: 10px;
                }
                // 表单
                /deep/.el-form {
                    border: 1px solid rgb(190, 189, 189);
                    width: 98%;
                    margin: 10px auto 30px;
                    border-radius: 6px;
                    /deep/.el-form-item {
                    margin-bottom: 12px;
                    margin-top: 10px;
                    }
                }
            }
        }
      }
    </style>
    
    
    Respect to:

    https://blog.csdn.net/love__xyy/article/details/88047306?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduend~default-1-88047306.nonecase&utm_term=vue%E9%94%9A%E7%82%B9%E6%8F%92%E4%BB%B6&spm=1000.2123.3001.4430

    展开全文
  • vue锚点的三种方法

    2020-08-27 05:43:22
    本文给大家带来了vue锚点的三种方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
  • js锚点跳转添加过度动画,vue锚点跳转js添加平滑过度效果

    这里声明一下,a标签锚点跳转和本文跳转不冲突,如果不需要平滑效果,只需要点击跳转锚点连接看此文;:vue实现锚点定位跳转,a标签实现锚点定位跳转
    先看看最终效果图:

    js锚点跳转添加过度动画,id锚点跳转js添加平滑过度效果

    接下来看代码:我的导航栏是动态的,内容列表也是循环出来的,其实道理都一样,基本原理就是找到跳转目标元素距离顶部的距离(document.getElementById(‘#type’)).offsetTop),然后获取当前距离顶部距离(document.documentElement.scrollTop),然后用js进行上下滑动操作,接下来看代码,为了看了简介,我删掉了不相关代码:

    HTML

    <!-- 右侧悬浮导航栏 -->
            <div>
              <div v-for="(item, indext) in fixList" :key="indext">
                <div
                  @click="tapItem(indext)"
                >
                  {{ item.name}}
                </div>
              </div>
              <div>顶部</div>
            </div>
            
            <!-- 商品分组显示页,也就是跳转的目标页 -->
            <div
              v-for="(item, index) in fixList"
              :key="index"
              :name="'type-' + index"
              :id="'type-' + index"
            >
            	内容区域,视频中的商品列表区....
            </div>
    

    JS

    tapItem(index) {
          // 点击单个分类,跳转到相应的锚点连接,并添加过度动画平滑效果
          this.activeBtn = index;
          // 需要跳转的目标锚点所在高度,因为定位不准确,应该是以底部为跳转距离了,我这里添加了一个屏幕高度,跳转位置刚好正确,根据项目自己修改
          let jumpHeight = (document.getElementById('type-' + index)).offsetTop + (document.documentElement.clientHeight - 90); 
          // 当前位置距离顶部的高度
          let top = document.documentElement.scrollTop
          if(jumpHeight > top) { 
            // 目标高度大于当前高度,说明需要往下滑
            let heigth = jumpHeight - top;
            if (this.myTimer == -1) { // 这个是一个定时器,用来防止重复点击的
              //滑动高度大于10000,在0.8秒内完成平移动画,80可以自己根据实际情况来改就是0.8秒
            if (heigth > 10000) {
              let num = Number((heigth / 80).toFixed(0));
              this.myTimer = setInterval(() => {
                top += num;
                if (top >= jumpHeight) {
                  top = jumpHeight;
                  window.clearInterval(this.myTimer);
                  this.myTimer = -1;
                }
                window.scrollTo(0, top);
              }, 10);
            } else {
              // 滑动距离小于10000,按默认速度滑动
              this.myTimer = setInterval(() => {
                top += 80;
                if (top >= jumpHeight) {
                  top = jumpHeight;
                  window.clearInterval(this.myTimer);
                  this.myTimer = -1;
                }
                window.scrollTo(0, top);
              }, 10);
            }
          }
          }else { // 目标高度小于当前高度,说明需要往上滑
            let heigth = top - jumpHeight;
            if (this.myTimer == -1) {
            if (heigth > 10000) {
              let num = Number((heigth / 80).toFixed(0));
              this.myTimer = setInterval(() => {
                top  -= num;
                if (top <= jumpHeight) {
                  top = jumpHeight;
                  window.clearInterval(this.myTimer);
                  this.myTimer = -1;
                }
                window.scrollTo(0, top);
              }, 10);
            } else {
              this.myTimer = setInterval(() => {
                top -= 80;
                if (top <= jumpHeight) {
                  top = jumpHeight;
                  window.clearInterval(this.myTimer);
                  this.myTimer = -1;
                }
                window.scrollTo(0, top);
              }, 10);
            }
          }
          }
        },
    

    学废了点个赞呗!
    在这里插入图片描述

    展开全文
  • {{item.name}}
  • vue锚点跳转

    2021-02-05 10:41:22
    (.top获取到的距离赋值给document.body.scrollTop实现锚点跳转) goMember(){ let that = this; that.$refs.member.scrollIntoView(true); let member = that.$refs.member; console.log(member....
  • toPinglun(){ this.$refs["pinglun"].scrollIntoView(true); } ​ <button @click="toPinglun">点击跳转到评论区</button> <div ref="pinglun">评论</div> ​
  • vue实现锚点跳转

    千次阅读 2021-10-20 13:03:13
    <div id="box1">我是模块一</div> <div id="box2">我是模块二</div> <div id="box3">...// 锚点跳转到模块三 this.$el.querySelector('#box3').scrollIntoView()
  • 今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • <div class="dark_anchor" id="rental" style="height: 100px; width: 100%; margin-top: -100px“ /> <rental /> // 方法集合 methods: { ... document.getElementById(id).scrollIntoView({ ...
  • vue js 锚点跳转

    2022-07-14 16:17:42
    锚点跳转
  • //锚点跳转到对应位置 toLocation(type) { let className = type == 2 ? 'lightList' : 'airListWrap' uni.createSelectorQuery().select('.' + className).boundingClientRect(data => { //目标位置...
  • 页面有一个需求,点击左侧目录可以跳转到右侧对应的问题处,研究半天发现是一个锚点跳转的功能 实现思路,在左侧目录标签处添加一个点击事件,给右侧每一个问题的标签加一个单独的id标识,利用点击事件获取到...
  • vue 锚点双向滚动监听

    2022-04-27 15:35:46
    <template> <div class="container"> <div class="wrapper"> <div class="section" style="height:385px;width:100%" v-for="(item, index) in list" :key="index" >...
  • anchor.scrollIntoView({behavior: 'smooth'}) // js的内置方法,可滚动视图位置至元素位置 }, 500) } }, jump(val) { // 点击跳转的方法 val 你定义的需要跳转的标签id 此方法可以根据自己的实际情况编辑 this....
  • 2.跳转锚点的基本方式 2.1 页面内通过点击来跳转 即添加一个a标签,href以#开头,然后在需要跳转的地方添加一个element,id设置为a标签href属性相同的值,只是不要#,就可以了,这是最简单的方式 <a href="#miao...
  • 前端vue实现目录锚点跳转及滚动到指定内容区域(带源码)
  • scrollIntoView,vue快速实现锚点功能,vue实现锚点定位功能的方法,实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能。vue项目使用锚点。Anchor整个示例 仅用了一个函数,无任何变量,带来了高效且...
  • vue3做导航栏锚点跳转

    千次阅读 2021-05-19 09:32:23
    注意点:vue的锚点不要有a标签 否则会一直刷新 导致锚点跳转出现点击第二次返回顶部的情况 html代码 <div class="rec-dhl"> <ul> <li @click="ondhl(0,'xshk')" :class="['rec-dhl-a',isdhl == 0 ?...
  • vue锚点和路由冲突

    2021-05-20 18:32:23
    解决方法: 在a标签上模拟锚点跳转功能 (anchorName)">锚点跳转a> // js代码 methods:{ anchor(anchorName){ let anchorElement = document.getElementById(anchorName); /*如果对应id的锚点存在,就跳转到锚点*/ ...
  • 跳转</> b页面 <div id="bbb">asdasdasds</div> const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector:
  • vue 锚点跳转(带滚动效果)

    千次阅读 2020-07-22 18:03:45
    document.querySelector(#xxx).scrollIntoView({ behavior: "smooth" });
  • 一、vue实现锚点 点击跳转 滑动过去 二、使用步骤 总结 前言 提示:这里可以添加本文要记录的大概内容: 提示:以下是本篇文章正文内容,下面案例可供参考 一、vue实现锚点 点击跳转 滑动过去。 二、...
  • 点击文字跳转当前页的某一个位置,或点击导航在当前页内多个位置跳转
  • vue-router 锚点跳转

    2022-07-25 03:19:28
    vue-router锚点跳转

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,194
精华内容 1,277
关键字:

vue锚点跳转