Back to top với hiệu ứng Bounce cho Blogger

Back to Top Button with Bounce Effect

Bài viết sau đây là bản nâng cấp của Tạo nút Lên đầu trang - Back to top cuộn mượt bằng jQuery phong cách Flat Design bổ sung thêm Bounce Effect khá đẹp mắt.

• DEMO

jQuery

1 Vào Mẫu >> Chỉnh sửa HTML và thêm đoạn jQuery vào trước thẻ </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

CSS và HTML

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

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBo1y91q2psPjSwsWlDXSmsLl3MMWvm4IyWhMtX7mAbUlTjXHjb7xNw1TlZhWOxnWaToe5MLLuHjb1KqdWBC_sTNLMV9IC1cCzGTU4SvBbancaCcLVVRGDFHq3EdN4YrsxcYWpKu2JvdI/s1600/back-to-top-iris-14.png'/></div>

Chỉnh sửa: Bạn có thể sửa giao diện bằng cách thay link ảnh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBo1y91q2psPjSwsWlDXSmsLl3MMWvm4IyWhMtX7mAbUlTjXHjb7xNw1TlZhWOxnWaToe5MLLuHjb1KqdWBC_sTNLMV9IC1cCzGTU4SvBbancaCcLVVRGDFHq3EdN4YrsxcYWpKu2JvdI/s1600/back-to-top-iris-14.png

Một số giao diện button mang phong cách Flat Design

• DOWNLOAD

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