Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Tuesday, March 3, 2015

Tiện ích nút Back To Top rất có ích cho độc giả blog của bạn ở những bài viết dài vì có thể dễ dàng tiết kiệm thời gian cho việc mất công phải kéo thanh cuộn lên đầu trang.


Đây là một nút Back To Top mình mới chế xin chia sẻ lại với các bạn, nó có hiệu ứng lên đầu trang rất đơn giản, click một cái là vèo phát lên đầu trang, không được mượt mà cho lắm vì không có jQuery nhưng bù lại nó sẽ ít ảnh hưởng đến tốc độ tải trang của bạn.
Bạn hãy click vào nút phía trên để xem Demo nhé!

Các bước tạo nút Back To Top

Bước 1: Các bạn vào chế độ chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS sau:
/* Back To Top by Nguyen Phuc - NvPN Blog - nvpn.blogspot.com */
#backtotop {height: auto;width: auto;position: fixed;bottom: 15px;right: 20px;background-color:#A5D16D;margin:0;padding:15px;border-radius:10px;border-bottom:4px solid #78994e;}
#backtotop:hover{background-color:#90b85c;border-bottom:2px solid #78994e;}
Bước 2: Tìm thẻ đóng và thêm vào trước nó đoạn JS bên dưới:
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var appended = false, top = document.createElement("a");
top.href = "#";
top.id = "backtotop";
top.innerHTML = "<img alt='Trở về đầu trang' src='https://lh4.googleusercontent.com/-X1mHEtLHLI0/VHrVmLm9D4I/AAAAAAAA5sw/3h4z4t1pRBo/s0/backtotop-nvpnblog.png'/>";

onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 100) {
if (!appended) {
document.body.appendChild(top);
appended = true;
}
} else {
if (appended) {
document.body.removeChild(top);
appended = false;
}
}
};
}
//]]></script>

Vậy là xong!

0 comments:

Post a Comment

Popular Posts