頁內跳轉到指定位置-有過渡動畫


一般頁內跳轉,像:錨點,scrollTo,location.hash正常情況下都是直接跳轉的,沒有動畫,如果我們想要添加動畫,就需要采取優化或其他辦法。不多說,看下面。

今天用了三種方法,分別是scrollTo、自定義function和jQuery鏈式的方法,個人推薦第一種,因為非常簡單,后續如果還有,會繼續補充。

window.scrollTo中可以配置過渡效果,它本身是瞬間跳轉到某一位置(即behavior:'instant'),只需要在他的對象中配置behavior:'smooth'就可以了,簡單快捷。

第二種方法就是自定義一個組件,這邊我寫下來一個思路你們自己參考。(19/09/06撰)

  首先你可以獲取當前滾動條位置和需要跳轉的位置。

  設置定時器,間隔多長時間觸發一次,然后你需要加一個判斷,是進行向上滾動還是向下滾動,即當前位置大於跳轉位置,還是小於跳轉位置。

  如果是向下滾動,將當前滾動條位置加上一個數字,然后執行一次window.scrollTo();如果向上滾動就減少一個數字,然后執行window.scrollTo()

  最后判斷當前滾動條位置是否大於(小於)需要跳轉的位置,如果大於(小於)清除定時器,否則繼續執行。

  

 最后一種方式,也很方便,就是通過jQuery的鏈式調用,在跳轉的同時加上一個動畫和時間就可以了。

  

  歡迎進店觀光,謝謝!!

 


免責聲明!

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



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