Hiệu ứng trở về đầu trang - scroll Top jquery đơn giản

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 .

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

1- 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- phần style của nút

<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>

-- 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-phần html - nơi đặt trong thẻ body để tiện bạn có thể đặt trước </body>

<a href="#" class="scrollup">Scroll</a>
</body>

hiệu ứng tuy cũ nhưng khá đơn giản và dễ làm