TieuBaoNgày: Chủ nhật, 06-Apr-14, 11:11:51 | Bài viết # 1

Nhóm: Administrator

Khen thưởng: 3

Được cảm ơn: 10001

Trạng thái: Offline

Có nhiều website có nội dung quá nhiều trên một trang, khiến việc di chuyển trở lên đầu trang khi đã xem hết nội dung trở nên khó khăn hơn. Để khắc phục điều này ta chỉ cần tạo ra một nút di chuyển, khi người truy cập đã xem hết nội dung và muốn di chuyển lên đầu trang thì chỉ việc click vào nút đó thay vì phải sử dụng Scroll di chuyển chậm chạm. Sau đây là hướng dẫn giúp bạn tạo ra chức năng này trên web, và bạn chỉ tốn chưa đầy 5′ cho việc này.

Có 2 cách để tạo ra chức năng này:

Cách 1: cách này khá đơn giản và dễ thực hiện, bạn chỉ việc thêm một thẻ liên kết với thuộc tính HREF mang giá trị “#” vào vị trí chân trang trên trang web của bạn là được. Ví dụ bạn chèn đoạn mã HTML dưới đây:

<a href="#" title="Lên đầu trang">Lên đầu trang</a> Cách này ưu điểm là nhanh và dễ làm, không sử dụng JavaScript. Nhưng nhược điểm là khi click để lên đầu trang thì người dùng bị “bay” lên đầu trang thay vì di chuyển lên, đôi khi khiến người xem cảm thấy đột ngột và khó chịu đồng thời nút này chỉ nằm ở cuối trang dẫn đến việc người dùng xem đến giữa trang hay bất kể vị trí nào khác ngoài chân trang thì đều không có nút này để di chuyển, ngoài ra cách này cũng tạo cảm giác thô cứng, thiếu mượt mà.

Cách 2: Cách này sẽ khắc phục được những nhược điểm của cách 1, nhưng bạn sẽ tốn thêm chút thời gian cho cách này. Bạn có thể làm theo các bước sau:

1/Chèn đoạn mã HTML sau vào vị trí mà bạn muốn hiển thị nút “Lên đầu trang”:

Quote

2/Style cho nút với đoạn css sau:

Quote

goTop {

bottom: 200px; cursor: pointer; display: none; height: 35px; position: fixed; right: 155px; width: 44px; z-index: 1000; } </style>

3/Thêm đoạn JavaScript sau:

Quote

goTop').fadeIn();

else $('

goTop').fadeOut();

}); $('

goTop').click(function () {

$('body,html').animate({scrollTop: 0}, 'slow'); }); }); </script>

Nhớ bỏ dòng thư viện jQuery 1.7.2 nếu web bạn đã có thư viện jQuery. Đoạn code trên sẽ thực hiện việc xác định thời điểm xuất hiện nút “Go to top” khi bạn Scroll chuột hay di chuyển nội dung web xuống dưới. Tùy trường hợp bạn có thể tùy chỉnh thêm bớt vị trí mà nút sẽ xuất hiện khi cách đầu trang bao nhiêu bằng cách thay số 100 trong dòng code if ($(this).scrollTop() > 100) $('

goTop').fadeIn(); đơn vị ở đây là pixel(px). Bạn cũng có thể thay tốc độ di chuyển từ vị trí click lên top trang bằng cách thay đổi thuộc tính “slow” bằng số, ví dụ như 1000 = 1 giây tại dòng code $('body,html').animate({scrollTop: 0}, 'slow');

4/Done: Chúc bạn thành công.

TRẺ DÙNG SỨC KHỎE KIẾM TIỀN-GIÁ DÙNG TIỀN MUA SỨC KHỎE

NHỮNG GÌ CON NGƯỜI KHÔNG NGHĨ TỚI LẠI XẢY RA TRONG ĐỜI

Nút Back To Top hay còn gọi một cách đơn giản là nút trượt lên trên khi bạn đang ở cuối website. Nhưng nếu như bạn đang sử dụng framework thì sẽ có một số framework có sẵn nhưng đa phần thì cái này sẽ loại khỏi bộ framework bởi độ ưu tiên cao cũng như nó cũng không khó và phức tạp gì cả. Nhưng bạn đang cầm tìm một nút “Back To Top” hoạt động mượt mà uyển chuyển thì Thịnh chia sẻ với bạn đoạn mã tạo nút “Back To Top” cho bạn.

Để có được nút backtotop thì bạn cần phải biết chút ít jquery, html và css. Khi bạn viết đoạn code này nó sẽ được tính theo dạng như sau, khi bắt đầu kéo xuống thì nút backtotop bắt đầu hiện lên và cho tới tận khi bạn kéo thanh cuộn xuống cuối site. Nhưng khi bạn click vào nó thì nó sẽ tự động nhảy về trên đầu trang theo dạng trượt và nó sẽ tự ẩn đi theo tính toán sẵn.

Nhưng điều quan trọng nữa là bạn cần thiết kế nút “Back To Top” đẹp hợp với site thì người dùng mới có cảm tình sử dụng nó.

Sau đây là hướng dẫn viết đoạn mã nút backtotop dành cho bạn.

Đầu tiên bạn cần soạn đoạn html như sau

Tiếp đến bạn viết đoạn css để trình bày hiển thị cũng như cho nó sang bên góc phải bên dưới màn hình như Thịnh đang sử dụng trên chính blog của thịnh

/ back to top / a.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 10px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); / image replacement properties / overflow: hidden; text-indent: 100%; white-space: nowrap; background:

3097D1 url("https://thinhweb.com/wp-content/themes/thinhweb/images/cd-top-arrow.svg") no-repeat center 50%;

visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } a.cd-top.cd-is-visible, a.cd-top.cd-fade-out, .no-touch a.cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } a.cd-top, a.cd-top:visited, a.cd-top:hover { color:

CCCCCC;

text-decoration: none; } a.cd-top.cd-is-visible { / the button becomes visible / visibility: visible; opacity: 1; } a.cd-top.cd-fade-out { / if the user keeps scrolling down, the button is out of focus and becomes less visible / opacity: 1; }

Tiếp đến bạn truy cập đường dẫn lấy hình ảnh nút backtotop của Thịnh: https://thinhweb.com/wp-content/themes/thinhweb/images/cd-top-arrow.svg

Tiếp theo bạn tạo một file backtotop.js và gọi đường dẫn tới file backtotop.js. Trong đó bạn soạn đoạn code như sau để nó thực thi tính toán khi đến vị trí thích hợp nó ẩn và hiện nút “Back To Top” bên trên.