Tạo nút Scroll To Top với hiệu ứng động vui nhộn cho Blogger

Scroll To Top button with animation for Blogger

Tiếp tục là một nút Back To Top khác, kèm hiệu ứng động vui nhộn với banner mặt troll độc đáo. Với tiện ích này website của bạn sẽ trở nên sinh động hơn hẳn đấy.

• DEMO

CSS

1Vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS sau trước thẻ ]]></b:skin>

#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:15px; cursor:pointer;display:none}

jQuery

2Tiếp tục tìm đến thẻ </head> và dán đoạn jQuery dưới đây vào trước thẻ đó.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>

HTML

3 Cuối cùng vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code bên dưới vào

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvIZq8HRX1Y_tDhGd9Uwx1t0N02RB66ChbvD-O92G8GtxrjsZY22kKDkfzb19wG_h82ovVGQEA_GSvgZzXw0szT7MpcoFSU2_oaNC7Gsls50d-SJhmgX9zOa766esakROFbMdCLHCu5JN/s1600/troll.gif' title='Lên nóc nhà là lên nóc nhà...'/></div>

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm