Nếu bạn dùng php Tạo 1 file backtotop.php với nội dung :Mã: <a id="yt-totop" href="#">Scroll to top</a> <script type="text/javascript"> jQuery(function($){ // back to top $("#yt-totop").hide(); $(function () { var wh = $(window).height(); var whtml = $(document).height(); $(window).scroll(function () { if ($(this).scrollTop() > whtml/10) { $('#yt-totop').fadeIn(); } else { $('#yt-totop').fadeOut(); } }); $('#yt-totop').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); // end back to top }); </script>Và thêm vào file index.php trong phần bodyMã: <jdoc:include type="modules" name="debug" /> <section id="yt_wrapper"> <a id="top" name="scroll-to-top"></a>
Nếu bạn dùng xenforo thì dùng code này giống như bênMã:http://diendanseovn.com/Chèn đoạn bên dưới vào template footerMã: <a href="#" class="scrollup">Scroll</a> <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 200) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script>và chèn đoạn bên dưới vào template footer.cssMã: .scrollup:hover{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url('http://diendanseovn.com/Picture/Top.png') no-repeat; opacity: 1; } .scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url('http://diendanseovn.com/Picture/Top.png') no-repeat; }