vue中实现点击按钮滚动到页面对应位置使用c3平滑属性实现

2024年04月01日前端 vue JS JavaScript css3 共享博客

vue项目中，需要实现点击对应按钮，滚动到对应页面位置，下面分享一个简单实用的方法

<template>
  <div class="box">
    <div class="btn">
      <span @click="Submit(1)">按钮一</span>
      <span @click="Submit(2)">按钮二</span>
      <span @click="Submit(3)">按钮三</span>
      <span @click="Submit(4)">按钮四</span>
      <span @click="Submit(5)">按钮五</span>
    </div>
    <div class="page">
      <div id="page1" style="background:red;"></div>
      <div id="page2" style="background:blue;"></div>
      <div id="page3" style="background:skyblue;"></div>
      <div id="page4" style="background:pink;"></div>
      <div id="page5" style="background:green;"></div>
    </div>
  </div>
</template>

<script>
	export default {
	  data () {
	    return {
	    }
	  },
	  methods: {
	    Submit (key) {
	      debugger
	      // 获取点击的按钮对应页面的id
	      var PageId = document.querySelector('#page' + key)
	      // 打印出对应页面与窗口的距离
	      console.log(PageId.offsetTop)
	      // 使用平滑属性，滑动到上方获取的距离
	      // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动
	      // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改
	      window.scrollTo({
	        'top': PageId.offsetTop,
	        'behavior': 'smooth'
	      })
	    }
	  }
	}
</script>

<style scoped>
	.box{
	  width: 100%;
	}
	.page{
	  width: 100%
	}
	.page div{
	  width: 100%;
	  height: 1000px;
	}
</style>

'behavior': 'smooth' 平滑属性可自己百度搜索了解更多

本文链接：http://so.lmcjl.com/news/905/

展开阅读全文

上一篇：四个地方设置彻底禁用 Windows 10 系统自动更新下一篇：js中三目运算的使用三目运算符如何判断多个条件

vue中实现点击按钮滚动到页面对应位置 使用c3平滑属性实现

vue中实现点击按钮滚动到页面对应位置使用c3平滑属性实现