Thật ra việc quay trở lại đầu trang web mà mình đang xem thì cũng không có gì mấy khó khăn. Ví như mình có thể lăn chuột, hay kéo thanh cuộn hoặc có thể bấm phím nóng để trở về đầu trang một cách tức thì.
Tuy nhiên vì cái sự lười của bản thân nên việc cuộn con chuột đã cảm thấy vất vả huống chi là bấm phím nóng hay và vừa bấm giữ vừa kéo con chuột cuộn thanh scrollbar. Nên một cái nút hiện chình ình trên trang cho mình bấm một phát trang web chạy cái vèo trở lại lên trên cùng là một sự sung sướng tột độ.
Cái nút bấm cuộn lên đầu trang này quan trọng nhất là cái javascript của nó vì nó giúp tính toán là khi bạn kéo trang đến đâu thì cái nút đó sẽ hiện ra và làm thế nào để nó chạy cái vèo lên trên.
<!-- Scroll to Top --><script type="text/javascript">(function(a){a(window).scroll(function(){if(a(this).scrollTop()>300){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);</script>
Trong cái javasript đó nếu bạn muốn thay đổi lại khi kéo trang tới đâu thì hiển thị nút bấm thì thay đổi thông số tại vị trí 300 bằng con số của riêng bạn.
Bên cạnh đó cần có sự kết hợp thêm hai cái nữa thì mới có thể chạy được cái back to top này đó là html và css
Đặt code html này vào trước thẻ </body> (thật ra đặt dưới thẻ <body> là được)
<!-- [Begin] nút về đầu trang --><a id='top' style='display: none;' title='Scroll to Top'>Top<span/></a><!-- [End] nút về đầu trang -->
Và rồi thêm ông CSS để làm đẹp cho nút cuộn lên đầu trang của mình.
/*-- back to top --*/#top{position:fixed;right:10px;bottom:10px;cursor:pointer;width:40px;height:40px;background-color:#369ecf;text-indent:-9999px;display:none;z-index:9;outline:0}#top span{position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px;height:0;width:0;border:8px solid transparent;border-bottom-color:#fff}
Trong css này có thể thay đổi màu theo sở thích của mình để hài hòa với màu sắc của website nữa là ổn.