Tạo thêm nút back to top cho blogspot - Website

Loading...

Thủ thuật hôm nay mình chia sẻ đó là cách tạo thêm nút back to top "lên đầu trang" cho Website, blog.
Điều hướng người xem 1 cách đơn giản luôn là những điều 1 Website, blog cần có. Với việc đưa thủ thuật này vào blog sẽ làm được điều hướng đó.
- Sử dụng Jquery với hiệu ứng đặc biệt thú vị, khi người xem Website, blog của bạn đã ở vị trí Top trên rồi thì nít back to top sẽ tự động ẩn đi mất, nó chỉ xuất hiện khi người xem không còn ở trên đầu trang Web.

Xem Demo tại trang blog: Thuốc và cách chữa trị tàn nhang (Kéo xuống góc để thấy nhé các bạn)
Hướng dẫn thủ thuật trên blogspot:
1. Vào bảng điều khiển blogger -> mẫu (Template) -> chỉnh sửa HTML (Edit HTML)
2. Tìm tới (Ctrl + F) </head> và dán code dưới đây ngay trên nó
Code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

3. Tìm đến </body> và dán code dưới đây ngay trên nó
Code:

<style type='text/css'>
#bttop{position:fixed;bottom:30px;right:30px;cursor:pointer;display:none;z-index:9999}
#top-arrow{display:block;width:41px;height:40px;background:#111;border:1px solid #000;border-radius:50%;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
#top-arrow::after{content:"";width:0;height:0;position:absolute;top:0;right:13px;border-color:transparent transparent #f1f1f1;border-style:solid;border-width:13px 8px}
#top-arrow:hover{background:#1295C9;border:1px solid #FFFFFF}
</style>
<div id='bttop'><a href='javascript:void(0);' id='top-arrow' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' title='Back-to-Top'/></div>
<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>

Trong đó:
- Phần bôi đỏ là để nút đó nằm bên phải, nếu nằm bên trái như trang itviet360 thì các bạn để đó là left nhé

Loading...

Chuyên mục: javascript, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger