在vue中實現錨點定位功能


場景如下:

 

 今天早上看到需求方新提的一個需求,這是一份網上答卷,點擊題數要實現滾動到對應題目的位置;

注意點:每題題目的高度是不受控制的,你可以取到想跳轉的index;(我再循環題目時做了index+1的操作,根據自己去區分index)

想法:我現在每道題目上加個id,類似  :id=`tLink${index+1}`,在點擊對應題標時(我這里index是1開始) if(index>1){循環算出小於index的高度和,即為滾動距離}else{滾動距離0}

實現代碼簡單展示:

 

 

 

 

$('.examDetail .el-card__body').animate({scrollTop: numTotal},500)

 這樣就可以完美實現,我自己還增加了大標題高度等控制,所以只貼了參考代碼,其實說白了,關鍵點就是根據題目數計算你要滾動的高度,然后讓相應的滾動條滾動該距離;

 

ps:隨手一記,沒有養成寫博客的習慣,這點我應該要改一下。學習路漫漫,學無止境,記錄自己成長的過程還是很幸福的o(* ̄▽ ̄*)o;如果有一樣走在前端路上的小伙伴 歡迎一起討論;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM