Jquery 01 – Tạo nút lên đầu trang web sử dụng hiệu ứng Jquery

0
378

[VIDEO TUT]

  • Đang cập nhật…

1. Hướng dẫn tạo nút lên đầu trang ScrollTop

a. Giới thiệu
  • Chắc hẳn các bạn đã từng tiếp xúc với nhiều trang web dài và khi cuộn tới cuối trang bạn cảm thấy mệt mỏi với việc phải kéo lại lên trên đầu trang thì ở đây tôi sẽ giới thiệu với các bạn một giải pháp được rất đông đảo mọi người sử dụng đó là ScrollTop.

1

b. Thực hành
  • Đầu tiên chúng ta sẽ bắt đầu với đoạn mã HTML:

  • Ở đây tôi có sử dụng bootstrap để làm cho nút bấm của chúng ta trở lên đẹp hơn các bạn có thể search bootstrap icon là sẽ có một bảng các icon cho các bạn chọn, tôi đặt id cho phần html này là “cuon” để tiện triệu gọi trong file css.
  • Tạo nút với CSS:

  • Trong đó thì sc là kí hiệu cho class hình bàn tay và tôi tạo css cho id #cuon cho đẹp mắt hơn
  • Tạo hiệu ứng chuyển động Và làm mờ với Jquery:

  • Tôi sẽ sử dụng sự kiện Click và hiệu ứng animate khi người dùng ấn vào nút Scroll của tôi thì nó sẽ thực hiện hành động chuyển về đầu trang với tốc độ là 600. Nếu trang của các bạn thiết kế dài thì các bạn hãy thiết lập tốc độ sao cho phù hợp
  • Chắc các bạn thắc mắc là tại sao khi chuyển về đầu trang mà nút Scroll của chúng ta vẫn còn ở đấy thì thật sự sẽ rất mất thẩm mỹ đúng không. Ở đây chúng ta sẽ thiết lập hành động cho nó khi về đầu trang sẽ tự động biến mất và tôi sẽ sử dụng hiệu ứng fadeIn, fadeOut:

2. Tổng kết

  • Như vậy tôi đã hướng dẫn các bạn cách sử dụng Jquery để tạo nút Scroll trong trang web. Bài học hôm nay tôi xin phép được tạm dừng ở đây, hẹn gặp lại các bạn trong bài tiếp theo. Chúc các bạn học tốt

Tác giả: Hà Trần Vietpro

 

 

 

[Total: 1    Average: 4/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here