Scroll To Top Button With jQuery

Khi trang trí cho blogger, sẽ có rất nhiều vấn đề phát sinh. Nhưng thật may đó lại là cơ hội để bạn tiếp cận nhiều hơn những thông tin hữu ích khác thay vì tạm hài lòng với những thứ hiện tại bạn đang có.

Tiện ích này không quá khó để bạn áp dụng. Sự tương thích tương đối cao và ít xung đột với các Code bạn đang dùng.

DEMO

HƯỚNG DẪN

Bước 1: Bạn vào phần chỉnh sửa HTML -> Ctrl + F -> Tìm đến dòng Code </body>

Bước 2: Thêm vào trước nó đoạn Code sau:

<style type="text/css"> #hb-gotop{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type='text/javascript'> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#hb-gotop").scrollToTop(); }); </script> <a href='#' id='hb-gotop' style='display:none;'>Scroll to Top</a>

LƯU Ý

- Thay chữ Scroll to Top thành tên bạn muốn hiện thị.

- Thay đổi các thông số để hiện thị nơi vị trí bạn muốn. Nếu không cứ để mặc định như vậy.