当前位置:首页 > 经验笔记 > VUE > 正文内容

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

han32685年前 (2020-07-02)VUE3270

9.gif

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' 平滑属性可自己百度搜索了解更多实例方法


本文摘抄共享博客

扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/11.html

分享给朋友:

相关文章

element-ui Tree 树形控件实现单选 最简方法VUE

做项目时需要用到Tree树形控件单选但是Tree组件没有单选设置,网上找了几个方法不太适应,看了官网文档发现很简单 代码如下      &n...

vue跳转时打开新窗口的方法

    1、<vue-link>标签实现新窗口打开    官方文档中说 v-link 指令被 <rou...

ElementUI的el-cascader级联选择器组件获取选中的label | VUE

ElementUI的el-cascader级联选择器组件获取选中的label | VUE

例如上图,需要拿到全部/设备:设备123<el-cascader   ref="myCascader"   :options=&q...

vue引入本地json数据文件

    data() {         return {...

基于Vue的移动端图片裁剪组件(vue-imgcut)

基于Vue的移动端图片裁剪组件(vue-imgcut)

安装:npm install vue-imgcut –save使用代码:<template>     <div...