原生js模仿jquery Scroll動畫
阿新 • • 發佈:2018-12-07
有時候我們在vue專案中需要用到有關scroll的動畫,但是又沒jquery那樣的animate簡單的動畫方法,又要避免引入jquery的包導致過大,於是就用原生js模仿一個:(可用於返回頂部,錨點動畫等)
selector此引數為id名,可直接呼叫該點選事件
goAnchor(selector) { let anchor = this.$el.querySelector(selector); let total = anchor.offsetTop; let distance = document.documentElement.scrollTop || document.body.scrollTop; let step = total / 50; if (total > distance) { smoothDown(); } else { let newTotal = distance - total; step = newTotal / 50; smoothUp(); } function smoothDown() { if (distance < total) { distance += step; document.body.scrollTop = distance; document.documentElement.scrollTop = distance; setTimeout(smoothDown, 10);//自定義時間 } else { document.body.scrollTop = total; document.documentElement.scrollTop = total; } } function smoothUp() { if (distance > total) { distance -= step; document.body.scrollTop = distance; document.documentElement.scrollTop = distance; setTimeout(smoothUp, 10); } else { document.body.scrollTop = total; document.documentElement.scrollTop = total; } } }