• ✅ (Đã xác minh)
  • Cài đặt nút Back To Top đơn giản trên Blog

    Ở bài viết này, mình sẽ chia sẻ nút back to top đơn giản với những bạn muốn đặt nút quay lại đầu trang trên blog của mình.

    Cài đặt nút Back To Top đơn giản trên Blog

    Mặc dù nút này khá đơn giản nhưng mình cảm thấy rất hấp dẫn và tối giản. Nút này sẽ xuất hiện ở góc dưới bên phải của blog của bạn.
    Live Demo

    Hướng dẫn cài đặt nút back to top

    Đây là CSS:
    /* Back To Top */
    .backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}

    Đây là JsHTML đặt trên thẻ </body> để hiển thị:
    <div class="backtotop hide"><span></span>Top</div>
    <script type='text/javascript'>
    $(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
    </script>
    Sau đó lưu lại và xem kết quả.

    Trên đây là bài viết cài đặt nút back to top đơn giản trên blog. Hi vọng sẽ thật hữu ích cho các bạn.

    5 Comments

    Cùng chuyên mục

    Service & High Quality Anh Trai Nang Blogger

    Powered by BFGMedia

    Chuyên dịch vụ dành cho blogspot
    và mạng xã hội

    Facebok Service

    Tăng like, tăng theo dõi Fanpage và Facebook cá nhân

    Blogspot Service

    Thiết kế, tặng template blogspot, miễn phí hosting vĩnh viễn

    Truyền Thông

    Hợp tác nội dung truyền thông, phát triển tin tức mạng

    Unlock Domain

    Nhận mở chặn link chia sẻ trên Facebook giá rẻ

    Unlimited Colors

    Customize the Skin of the template with Unlimited Color Options

    Google Analytics

    Place your Tracing Code like Google Analytics Only in few options

    Social Sharing

    100% Compatible with 200+ Social Sharing Websites

    Fully Responsive

    Full Compatibility with all Devices like Mobile, Tablet and Desktop

    No Coding Required

    Customize your Website with No Coding Knowledge Required