tạo nút Menu top cho web

Để thực hiện điều này các bạn chỉ cần vào style đang sử dụng, gắn đoạn code bên dưới vào cuối (nằm trên thẻ </body>) template footer

code đây 

<style>
#toTop {
    background: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 5px;
    bottom: 40px;
    color: #333;
    cursor: pointer;
    display: none;
    font-size: 11px;
    padding: 18px;
    position: fixed;
    right: 20px;
    text-align: center;
}
#toTop::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent @primaryMedium; /*Đổi #198708 bằng mã màu bạn muốn*/
    border-image: none;
    border-style: solid;
    border-width: 11px;
    content: "";
    height: 0;
    left: 7px;
    position: absolute;
    top: -4px;
    width: 0;
}
#toTop::after {
    background-color: @primaryMedium;;
    content: "";
    height: 12px;
    left: 13px;
    position: absolute;
    top: 18px;
    width: 10px;
}
</style>
<div id="toTop"></div>
<script type="text/javascript">
    //roll top
    $(function() {
        $(window).scroll(function() {
            if($(this).scrollTop() != 0) {
                $('#toTop').fadeIn();  
            } else {
                $('#toTop').fadeOut();
            }
        });
   
        $('#toTop').click(function() {
            $('body,html').animate({scrollTop:0},800);
        });  
    }); </script>

• Tweet
• Share
• Share
• Share
• Share

Nguyễn Mạnh Quân Administrator

Chào các bạn Mình hiện đang là học sinh nhưng hiện tại mình là Admin của trang web này. Mọi thắc mắc các bạn có thể liên hệ trực tiếp qua trang Facebook cá nhân của mình ở trên đầu trang. Cảm ơn các bạn đã quan tâm.

Related Post