Tạo nút kết hợp back top & back bottom cực chất cho blogger

Tài liệu
Tạo nút kết hợp back top & back bottom cực chất cho blogger
Chuyên mục
Người đăng
Đăng vào

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>
.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>
Chúc bạn thành công!

Hiện có bình luận