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


Posted in Javascript onDecember 29, 2019

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

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

原文地址 http://www.sharedblog.cn/?post=205

<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>

总结

以上所述是小编给大家介绍的vue中实现点击按钮滚动到页面对应位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
js动态为代码着色显示行号
May 29 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue element-ui实现input输入框金额数字添加千分位
Dec 29 #Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 #Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 #Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 #Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 #Javascript
Vue页面刷新记住页面状态的实现
Dec 27 #Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 #Javascript
You might like
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
Python列表推导式的使用方法
2013/11/21 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Django模板语言 Tags使用详解
2019/09/09 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python partial函数原理及用法解析
2019/12/11 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python实现坦克大战
2020/04/24 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
小学教师的个人自我鉴定
2013/10/24 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js