Tiện ích nút Lên đầu trang là ứng dụng khá tiện lợi khi độc giả đọc hết bài viết của bạn có nội dung tương đối dài, thay vì độc giả phải cuộn chuột hoặc kéo thanh trượt dọc để về trang đầu khá mắc công…
Nút Lên đầu trang thường được tạo ra bởi 2 cách: Sử dụng CSS hoặc Sử dụng Jquery (Ở 2 cách trên đề có 2 cách nhỏ: Sử dụng chữ hoặc hình ảnh để là “biểu tượng” cho nút Back to top).
Đến với hôm nay mình sẽ hướng dẫn các bạn cả 2 cách để tạo nút Back to top và cả hai cách này đều sử dụng ảnh để là biểu trượng cho nút Back to top.
☼ Cách tiến hành:
Chỉ cần chèn đoạn mã sau đây vào một Widget HTML/Javascript là Oke
Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.
Cách 1: Sử dụng CSS
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png"/></a>
Cách 2: Sử dụng Jquery
<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);
return false})});</script><a href="http://www.windows2it.com/">
</a><a id='noop-top' style='display: none; position: fixed;
bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='http://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png'/></a>
☼ Tùy chỉnh
· 800 là tốc độ khi cuộn trang, các bạn cũng có thể tùy chỉnh theo ý muốn.
· Thay đổi link ảnh màu xanh thành link ảnh bạn mong muốn, dưới đây mình cũng sưu tâm một số ảnh thích cái nào thì tải về upload lên, rồi lấy link hình thay vào lưu lại là oke nhé @!
☼ Kết luận
· Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>
· Đối với cách 1 sử dụng CSS thì tốc độ load site của bạn sẽ nhanh hơn rất nhiều so với cách 2 sử dụng Jquery (xử lý Jquery). Nhưng cách 1 cách lại không có hiệu ứng đối với cách 2 lại có hiệu ứng cuộn lên khá đẹp.
0 nhận xét:
Đăng nhận xét