Tạo Nút Back To Top, Back To Home
vào
28 thg 10, 2017
Oke Hôm Nay Mình Sẽ Hướng Dẫn Các Bạn Cách Thêm Nút Back To Top Và Back To Home Oke. Các Bạn Edit Đoạn CSS Sao Cho Phù Hợp Với Template Các Bạn Nhé Và Ngời Ra Các Bạn Có Thể Edit Màu Ở Đoạn CSS (Bước 2 Nhé)
CÁCH THỰC HIỆN:
Bước 1: Đăng nhập Blogger Chủ đề Chỉnh sửa HTML.
Bước 2: Copy & Paste đoạn code này phía trên thẻ
Bước 2: Copy & Paste đoạn code này phía trên thẻ
]]<>/b:skin/Back To Top-Home/ .back-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:70px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);} .back-bottom{z-index:9999;width:35px;height:35px;position:fixed;bottom:30px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);} .back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:70px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:#444343;color:#fff;text-align:center;line-height:33px;border-radius:5px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);} .back-top:hover,.back-home:hover,.back-bottom:hover{background-color:#DF7401}>Bước 3: Paste đoạn CSS ở dưới lên trên thẻ <body>
<div class='back-top'><i class='fa fa-chevron-up'/></div>Bước 4: Lưu Template lại và xem thành quả.
<div class='back-home'><a href='http://www.huynhngoctinhit.tk' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>
<script type='text/javascript'>
$('.back-bottom').click(function(){$('html,body').animate({scrollTop:$("#credit").offset().top},1000);});
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".back-top").css({
bottom: "110px"
});
} else {
$(".back-top").css({
bottom: "70px"
});
}
});
$(".back-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 1000);
return false;
});
</script>
NGUỒN: Star Cường IT
Nội dung chính
