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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
js异或加解密效果代码
Jun 25 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
js实现随机点名程序
Sep 17 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php 在线打包_支持子目录
2008/06/28 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
如何判断php数组的维度
2013/06/10 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python中文竖排显示的方法
2015/07/28 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
岗位说明书怎么写
2014/07/30 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
python 逐步回归算法
2021/04/06 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python