Chào các Blogger, bài viết hôm nay tôi sẽ hướng dẫn các bạn cách nút trượt Back To Top đơn giản và đẹp!
Demo
CÁCH THÊM
- Bước 1: Vào Mẫu -> Chỉnh sửa Template
- Bước 2: Sử dụng Ctrl + F và tìm thẻ <head>
- Bước 3: Copy đoạn Code sau vào phía sau thẻ
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
- Bước 4: Tìm ]]></b:skin>
- Bước 5: Thêm vào trước nó Code Sau:
#scroll-top {
background-color: #777777;
border-radius: 24px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) inset;
color: #FFFFFF;
cursor: pointer;
display: block;
font-family: Verdana;
font-size: 2em;
font-weight: bold;
line-height: 2em;
text-align: center;
text-decoration: none;
position:fixed;
width: 48px;
height: 48px;
bottom:30px;
right:20px;
opacity:0.85;
transition:opacity 0.25s ease 0s;
}
#scroll-top:hover{
opacity: 1;
color: #FFFFFF;
}
- Bước 5: Tìm thẻ </body> và thêm nó trước nó đoạn code sau
<script type='text/javascript'>
$(function() {
$.fn.scrolltoTop = function() {var scrollLink = $(this),win = $(window);scrollLink.hide();if (win.scrollTop() != '0'){scrollLink.fadeIn('slow')}win.scroll(function() {if (win.scrollTop() == '0'){scrollLink.fadeOut('slow')}else{scrollLink.fadeIn('slow')}});scrollLink.click(function() {$('html, body').animate({scrollTop: 0}, 'slow')})}});$(function() {$('#scroll-top').scrolltoTop();});</script><a id='scroll-top' href='#' title='Scroll to top'>^</a>