Share Tạo hiệu ứng scroll tới vị trí anchor với thư viện AnchorScroll.js

filiallion

Administrator
Staff member
Administrator
Messages
276
Points
10
Language
Tiếng Việt
Mặc định HTML đã hỗ trợ các bạn di chuyển trang tới vị trí anchor một cách đơn giản nhưng nó không hỗ trợ hiệu ứng scroll mượt, tạo ra cảm giác khó chịu. Với thư viện AnchorScroll.js thì vấn đề này đã được khắc phục với nhiều hiệu ứng scroll đẹp mắt, tạo cảm giác chuyên nghiệp hơn cho website.

Thư viện AnchorScroll.js là một plugin jQuery, được thiết kế hỗ trợ tất cả các trình duyệt phổ biến hiện nay như Internet Explorer 9+, Firefox, Chrome, Opera, Safari, bao gồm cả trên điện thoại di động và máy tính bảng. Việc sử dụng thư viện AnchorScroll.js cũng đơn giản chỉ với vài dòng mã lệnh cài đặt.

Để sử dụng thư viện AnchorScroll.js, các bạn cần phải tích hợp thư viện jQuery và tải thư viện AnchorScroll.js tại địa chỉ https://github.com/virgiliud/jquery.anchorScroll.

Các bạn tích hợp thư viện AnchorScroll.js vào website với nội dung mã lệnh như sau:
HTML:
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.anchorScroll.min.js"></script>
Áp dụng hiệu ứng scroll cho anchor như ví dụ sau:
HTML:
<a href="#anchor" class="anchor-scroll" data-class-to="body" data-on-scroll="blur">Go to anchor</a>
Các bạn có thể xem các ví dụ và hướng dẫn sử dụng của thư viện AnchorScroll.js tại địa chỉ http://www.virgiliudiaconu.com/work/anchor-scroll.
 
Top