Tạo nút Back to Top với hiệu ứng từ jQuery

Cách 1:

Chèn đoạn code sau phía trên </body> trong file footer.php:

<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Cách 2:
- Chèn đoạn code sau phía trên </body> trong file footer.php:

<script type="text/javascript">

        $(document).ready(function() {

            $('body').append('<div id="backtotop">^Top</div>');

           $(window).scroll(function() {

            if($(window).scrollTop() >200) {

                $('#backtotop').fadeIn();

            } else {

                $('#backtotop').fadeOut();

            }

           });

           $('#backtotop').click(function() {

            $('html, body').animate({scrollTop:0},500);

           });

        });</script>

- Thêm vào file css 

 

 #backtotop {
background: url("images/scroll-top.png") no-repeat scroll left top #666666;
width: 29px;
height: 29px;
position: fixed;
bottom: 50px;
right: 50px;
cursor: pointer;
border-radius: 30px;
}