当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

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>

总结

以上所述是小编给大家介绍的vue中实现点击按钮滚动到页面对应位置，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网