Code lên đầu trang sử dụng Jquery cho Blogger

Code lên đầu trang sử dụng Jquery cho Blogger

Hiệu ứng scroll top ta thường thấy xuất hiện ở 1 số trang web có nội dung dài -khiến người lướt web phải lăn mouse 3 hay dùng trỏ chuột kéo thanh scroll bar rất bất tiện . Và hôm nay mình xin chia sẻ với các bạn Code lên đầu trang sử dụng Jquery cho Blogger
Khi sử dụng hiệu ứng jquery scroll top sẽ giúp người dùng trở về ngay đầu trang - tránh làm mất thời gian - nút bấm scroll top sẽ xuất hiện thi nội dung trang web được

Code lên đầu trang sử dụng Jquery cho Blogger

Các thực hiện như sau:
1- Thêm phần script

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });
        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 'slow');
            return false;
        });
    });
</script>

2- Thêm phần style của nút lên

<style>
    .scrollup{
    width:40px;
    height:40px;
    opacity:1;
    position:fixed;
    bottom:20px;
    right:10px;
    display:none;
    text-indent:-9999px;
    background:#333333 url('http://icons.iconarchive.com/icons/troyboydesign/delightful-zodiac/128/Snake-icon.png') no-repeat;
}
</style>

Các bạn có thể thay bằng hình ảnh khác cho phù hợp với trang web

http://icons.iconarchive.com/icons/troyboydesign/delightful-zodiac/128/Snake-icon.png

3- Giờ để xuất hiện cái nút đi lên đó bạn hãy đặt trong thẻ body để tiện bạn có thể đặt trước
<a href="#" class="scrollup">Scroll</a>
</body>
Chúc các bạn thành công!

Nguồn : iChiaSe.Biz

Tag : Thủ Thuật Blogger