Bài viết này mình sẽ hướng dẫn các bạn cách tạo 1 nút kết hợp giữa back top và back bottom cực chất cho blog
Cái này mình lấy ý tưởng từ bên Zing Me. Code này mình lấy bên Star Tuấn IT
Demo: Các bạn có thể xem tại blog mình
HƯỚNG DẪN CÁCH LÀM:
Bước 1: Tìm thẻ </head> và thêm đoạn code phía dưới lên trên nó (bước này dành cho ai chưa thêm thư viện jQuery, còn ai có rồi thì khỏi thêm nhé.)<script src='http://code.jquery.com/jquery.min.js'/>
Bước 2: Tìm đoạn </body> và thêm toàn bộ đoạn code bên dưới lên trên thẻ vừa tìm được
<style>Chúc bạn thành công!
.bt-top,.bt-bottom{background-color:#157dd7;box-shadow:0 0 6px rgba(0, 0, 0, 0.2);border:3px solid #fff;border-radius:100%;visibility:hidden;width:28px;height:28px;line-height:30px;text-align:center;position:fixed;bottom:20px;right:20px;z-index:999;cursor:pointer;opacity:0;-webkit-transform:translateZ(0);transition:all .3s}
.bt-top.show{visibility:visible;opacity:.8}
.bt-bottom{opacity:.8;visibility:visible}
.bt-top i,.bt-bottom i{font-size:14px;font-weight:bold;color:#fff;position:absolute;left:7px}
.bt-top i{top:5.5px}.bt-bottom i{top:6.5px}
.st-hide{display:none}
.bt-top:hover,.bt-bottom:hover{background-color:#085496}
</style>
<div class='bt-top' title='Lên trên'><i aria-hidden='true' class='fa fa-chevron-up'/></div>
<div class='bt-bottom' title='Xuống dưới'><i aria-hidden='true' class='fa fa-chevron-down'/></div>
<script type='text/javascript'> //<![CDATA[
(function () {
$(document).ready(function () {
return $(window).scroll(function () {
return $(window).scrollTop() > 200 ? $(".bt-top").addClass("show") : $(".bt-top").removeClass("show")
}), $(".bt-top").click(function () {
return $("html,body").animate({
scrollTop: "0"
})
})
})
}.call(this));
(function () {
$(document).ready(function () {
return $(window).scroll(function () {
return $(window).scrollTop() > 200 ? $(".bt-bottom").addClass("st-hide") : $(".bt-bottom").removeClass("st-hide")
}), $(".bt-bottom").click(function () {
return $("html,body").animate({
scrollTop: "99999"
})
})
})
}.call(this));
//]]> </script>