一般頁內跳轉,像:錨點,scrollTo,location.hash正常情況下都是直接跳轉的,沒有動畫,如果我們想要添加動畫,就需要采取優化或其他辦法。不多說,看下面。
今天用了三種方法,分別是scrollTo、自定義function和jQuery鏈式的方法,個人推薦第一種,因為非常簡單,后續如果還有,會繼續補充。
window.scrollTo中可以配置過渡效果,它本身是瞬間跳轉到某一位置(即behavior:'instant'),只需要在他的對象中配置behavior:'smooth'就可以了,簡單快捷。
第二種方法就是自定義一個組件,這邊我寫下來一個思路你們自己參考。(19/09/06撰)
首先你可以獲取當前滾動條位置和需要跳轉的位置。
設置定時器,間隔多長時間觸發一次,然后你需要加一個判斷,是進行向上滾動還是向下滾動,即當前位置大於跳轉位置,還是小於跳轉位置。
如果是向下滾動,將當前滾動條位置加上一個數字,然后執行一次window.scrollTo();如果向上滾動就減少一個數字,然后執行window.scrollTo();
最后判斷當前滾動條位置是否大於(小於)需要跳轉的位置,如果大於(小於)清除定時器,否則繼續執行。
最后一種方式,也很方便,就是通過jQuery的鏈式調用,在跳轉的同時加上一個動畫和時間就可以了。
歡迎進店觀光,謝謝!!