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

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.
back to top, len dau trang
Xem Demo tại trang blogThuố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é

0 nhận xét: