Hướng dẫn xây dựng tính năng scroll trong trang bằng Javascript ES6

2346

Tính năng scroll trong trang khi nhấp chuột vào button hay liên kết là rất phổ biến ở nhiều website. Hãy cùng TopDev nghiên cứu cách thực hiện bằng Javascript ES6 nhé.

Tính năng scroll trong trang

Scroll trong trang là tính năng khi trong cùng một trang có nội dung dài, thường áp dụng cho các trang landing hoặc các trang có nhiều lớp nội dung. Khi người dùng nhấp chuột vào button hoặc liên kết, màn hình sẽ scroll xuống phần phía dưới tương ứng.

Tất nhiên, trong trình duyệt vẫn sẽ hỗ trợ, nhưng khi làm với Javascript, bạn phải đảm bảo nó hoạt động kèm animation.

Các bước thực hiện scroll trong trang bằng Javascript ES6

Tạo anchor trong markup

Đầu tiên, bạn cần gán anchor cho khu vực sẽ scroll đến:

Tạo trigger trong markup

Tiếp đến, bạn gán href link cho button hoặc liên kết mà người dùng sẽ nhấp chuột vào.

Nếu bạn muốn nhấp chuột vào tất cả liên kết bất kì dạng #something thì bạn có thể bỏ qua gán class prefix Javascript js-scroll. Tất nhiên, ta cũng sẽ cần thay đổi code một chút trong Javascript.

Sử dụng thư viện animation Javascript Tweet.js

Để làm hoạt động mượt mà, bạn cần sử dụng thư viện Tweezer.js, hỗ trợ với ES6 hay cả ES5. Bạn có thể cài đặt với npm install --save-dev Tweezer.js

/*– Tweezer –*/
class Tweezer {
constructor (opts = {}) {
this.duration = opts.duration || 1000
this.ease = opts.easing || this._defaultEase
this.start = opts.start
this.end = opts.end
this.frame = null
this.next = null
this.isRunning = false
this.events = {}
this.direction = this.start < this.end ? ‘up’ : ‘down’
}
begin () {
if (!this.isRunning && this.next !== this.end) {
this.frame = window.requestAnimationFrame(this._tick.bind(this))
}
return this
}
stop () {
window.cancelAnimationFrame(this.frame)
this.isRunning = false
this.frame = null
this.timeStart = null
this.next = null
return this
}
on (name, handler) {
this.events[name] = this.events[name] || []
this.events[name].push(handler)
return this
}
emit (name, val) {
let e = this.events[name]
e && e.forEach(handler => handler.call(this, val))
}
_tick (currentTime) {
this.isRunning = true
let lastTick = this.next || this.start
if (!this.timeStart) this.timeStart = currentTime
this.timeElapsed = currentTime this.timeStart
this.next = Math.round(this.ease(this.timeElapsed, this.start, this.end this.start, this.duration))
if (this._shouldTick(lastTick)) {
this.emit(‘tick’, this.next)
this.frame = window.requestAnimationFrame(this._tick.bind(this))
} else {
this.emit(‘tick’, this.end)
this.emit(‘done’, null)
}
}
_shouldTick (lastTick) {
return {
up: this.next < this.end && lastTick <= this.next,
down: this.next > this.end && lastTick >= this.next
}[this.direction]
}
_defaultEase (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b
return c / 2 * ((t) * (t 2) 1) + b
}
}
/*– End Tweezer –*/

Các function sử dụng

Sau đó, ta lần lượt xây dựng các function có liên quan (để viết theo kiểu functional programming):

Function có liên quan

Đây là các function nhỏ lẻ có liên quan, giúp ta thực hiện một công việc duy nhất nào đó.

Function sau sẽ làm nhiệm vụ bắt điểm scroll đầu tiên

Function sau sẽ làm nhiệm vụ check xem đường dẫn (href) có chứa kí tự đầu tiên là “#” không:

Function làm nhiệm vụ lấy value của href:

Function để ta set giá trị cho một object

Function chính

Hai function sau sẽ làm nhiệm vụ chính để tìm và scroll đến target:

Gán event listener vào trigger:

Kết luận

Mình không cung cấp tài liệu hoàn chỉnh cho các bạn. Các bạn phải tự tay làm, thử nghiệm và kiểm tra mức độ chính xác của các function nhé.

TopDev via Codetot

SHARE