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

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

han32685年前 (2020-07-02)VUE3308

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

分享给朋友:

相关文章

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

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

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

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

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

elementUI Cascader组件在for循环中无法使用getCheckedNodes这个方法

elementUI Cascader组件在for循环中无法使用getCheckedNodes这个方法

上一篇文章说了elementUI组件获取label的值,把Cascader选择器放在for循环中问题又来了用getCheckedNodes报错没有这个方法我就试探性的看看他的上级有没有存储 ...

在vue中实现element-ui的el-dialog弹框拖拽

1.在assets/js/文件夹下新建directives.js 文件:import Vue from 'vue' // v-dialog...

vue 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。module.exports = {  ...