Scroll to Top jquery - Javascript code cho Website, Blog

Loading...

Hôm nay ITViet360 chia sẻ với bạn thêm 1 thủ thuật code nữa về Scroll to Top. Các bạn đã từng quản trị tới Website hoặc Blog chắc chắn sẽ biết đến tác dụng của code này. Nó giúp cho người xem Web, Blog khi đang ở dưới chân trang Web có thể lên ngay trên chỉ với 1 Click chuột ngay ở đó.
- Đoạn code sử dụng jquery và 1 đoạn CSS kết hợp làm bo góc nút tạo cảm giác mượt mà và rất đẹp cho người xem Web.

Demo trực tiếp tại Blog làm đẹp (Kéo thanh cuộn trình duyệt xuống để thấy)

Chỉ cần thêm đoạn code dưới đây vào phần BODY của Website hoặc Blog.
- Đối với Blogger các bạn có thể thêm vào 1 tiện ích hoặc thêm mẫu thiết kế bằng cách vào bảng điều khiển -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) tìm tới </body> và dán code ngay trên nó
- Đối với Wordpress các bạn cũng làm tương tự bằng cách thêm vào 1 Widgets dạng Text hoặc chỉnh sửa File Footer và dán code dưới trước </body> mà không phải sử dụng Plugin nào.
Code:

<!-- Scroll to Top Starts -->
<style type='text/css'>
#MD-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:96px;background-color: #EEEEEE;background-color:#FFD45D;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:51px;right:29px;cursor:pointer;color:#111;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr(&quot;href&quot;);
    if ($(window).scrollTop() != &quot;0&quot;) {
        $(this).fadeIn(&quot;slow&quot;)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
$(function() {
    $(&quot;#MD-StoTop&quot;).scrollToTop();
});
</script>
<a href='#' id='MD-StoTop' style='display:none;'>Scroll to Top </a>
<!-- Scroll to Top ends -->

Tùy chỉnh:
- https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js: : Nếu trong source của bạn có rồi thì xóa đi tránh bị đụng dẫn đến tình trạng không hiển thị.
- Scroll to Top: bạn có thể thay thế bằng chữ bạn muốn. Ví dụ: Lên đầu trang

Chúc các bạn vui vẻ !

Loading...

Chuyên mục: Source code, Thu thuat blogspot, thu-thuat-blogger