Hỗ trợ trực tuyến
Codedayroi.Net
© Copyright 2018 Code đây rồi

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


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!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...