vue項(xiàng)目中，需要實(shí)現(xiàn)點(diǎn)擊對(duì)應(yīng)按鈕，滾動(dòng)到對(duì)應(yīng)頁(yè)面位置，下面分享一個(gè)簡(jiǎn)單實(shí)用的方法

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、陽(yáng)泉ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的陽(yáng)泉網(wǎng)站制作公司

原文地址 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" ></div>
  <div id="page2" ></div>
  <div id="page3" ></div>
  <div id="page4" ></div>
  <div id="page5" ></div>
 </div>
 </div>
</template>
<script>
export default {
 data () {
 return {
 }
 },
 methods: {
 Submit (key) {
  debugger
  // 獲取點(diǎn)擊的按鈕對(duì)應(yīng)頁(yè)面的id
  var PageId = document.querySelector('#page' + key)
  // 打印出對(duì)應(yīng)頁(yè)面與窗口的距離
  console.log(PageId.offsetTop)
  // 使用平滑屬性，滑動(dòng)到上方獲取的距離
  // 下方我只設(shè)置了top，當(dāng)然 你也可以加上 left 讓他橫向滑動(dòng)
  // widow 根據(jù)瀏覽器滾動(dòng)條，如果你是要在某個(gè)盒子里面產(chǎn)生滑動(dòng)，記得修改
  window.scrollTo({
  'top': PageId.offsetTop,
  'behavior': 'smooth'
  })
 }
 }
}
</script>
<style scoped>
.box{
 width: 100%;
}
.page{
 width: 100%
}
.page div{
 width: 100%;
 height: 1000px;
}
</style>

網(wǎng)頁(yè)名稱：vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))-創(chuàng)新互聯(lián)
瀏覽地址：http://jinyejixie.com/article18/diesdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、小程序開(kāi)發(fā)、網(wǎng)站排名、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷(xiāo)推廣、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)