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).
Đọc thêm:
Đến với hôm nay Windows2it 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="https://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='https://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 tích này quá đơn giản nên mình
không DEMO ngoài chỉ để DEMO trực tiếp ở bài viết cho các bạn tham khảo.
·
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.
Backlink: Bồi dưỡng nghiệp vụ quản lý
Còn bạn muốn Support gì thì cứ để lại
comment @!
http://codepen.io/quangmen93/pen/LGooRa?editors=0010
https://drive.google.com/file/d/0B5QVuVFkIneiMHBGUE5lMWt4SnM/view?usp=sharing
sửa t.get(r.olderPostsLink,"html") thành t.get(r.olderPostsLink,"") là ok liền
http://www.tranbinhtrong.vn/
Đăng nhận xét