Bootstrap Project A-Z 09 – Xây dựng scroll page

0
503

[ VIDEO TUT ]

Bấm Subscribe Nhận video học mới nhất :

Chú ý: Các bạn lựa chọn video ở chế độ 720HD để xem được chất lượng hình ảnh và âm thanh tốt nhất nhé.

1. Xây dựng scroll page

Chúng ta đã hoàn thành được giao diện HTML và menu Responsive  trong bài học số 7, các bạn có thể tại lại file HTML ở bài số 7. Hôm nay chúng ta sẽ tiếp tục đi tới phần tạo scroll page.

Scroll page hiện cũng đang là kiểu thiết kế thông dụng hiện nay, bằng cách sử dụng thanh menu để cuộn trang đến các mục khác nhau. Tôi sẽ hướng dẫn các bạn xây dựng một scroll page đơn giản sử dụng jquery.

Trong bài này ta sẽ chú ý tới 2 hàm position() scrollTop() của jquery. Trong đó:

position(): Lấy tọa độ top và left hiện tại của thành phần, tọa độ này được tính dựa vào gốc của thành phần cha.

scrollTop(): tọa độ của thành phần hiện tại tính từ đầu trang tới thanh cuộn.

Phần HTML chúng ta thêm các class và id sau: #wrapper, .wrap-inner.

Truyền giá trị vào cho thẻ <a> ở .header-menu.

Phần CSS:

Class .current sẽ được active mỗi khi mà người dùng ấn ở vị trí tương ứng. Ví dụ người dùng ở vị trí có ID portfilio thì thẻ <a> có thuộc tính href là #portfilio sẽ được active class .current

Bây giờ khi ấn vào các thẻ <a> này trình duyệt sẽ tự động nhảy tới vị trí của các ID tương ứng. Tuy nhiên nó vẫn chưa được mượt mà nên ta sẽ phải dùng tới jquery.

Thêm đoạn mã sau:

Tiếp theo là tới thanh cuộn dọc. Các bạn thêm đoạn code sau:

Như vậy chúng ta đã hoàn thành được scroll page cho trang HTML. Cảm ơn các bạn đã theo dõi.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Bạn nào chưa xem các bài học trước có thể xem tại đây nhé.

Giáo trình học bootstrap cơ bản.

Tác giả: Đạt Nguyễn Vietpro

 

[Total: 1    Average: 3/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here