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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
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函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
javascript复制对象使用说明
2011/06/28 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
JavaScript 实现继承的几种方式
2021/02/19 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python生成随机密码
2015/03/10 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python判断telnet通不通的实例
2019/01/26 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python字典实现伪切片功能
2020/10/28 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
大学生志愿者感言
2014/01/15 职场文书
体育节口号
2014/06/19 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
大学军训心得体会800字
2016/01/11 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
SQL Server中搜索特定的对象
2022/05/25 SQL Server
nginx之queue的具体使用
2022/06/28 Servers