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 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
微信小程序动态设置图片大小的方法
Nov 21 Javascript
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 include,include_once,require,require_once
2008/09/05 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
vue cli 全面解析
2018/02/28 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
经理任命书模板
2014/06/06 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
借条如何写
2015/05/26 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
导游词之天津古文化街
2019/11/09 职场文书
八年级作文之感恩
2019/11/22 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js