Tạo nút Lên đầu trang - Back to top cuộn mượt bằng jQuery phong cách Flat Design

Back to Top Button With Smooth Scrolling Flat Design

Flat Design hiện nay được rất nhiều người ưa chuộng, hòa cùng xu thế đó Iris Tips sẽ giới thiệu cho các bạn nút Back to top với phong cách Flat Design hiện đại. Chi tiết sẽ được hướng dẫn ở bài viết dưới đây.

• DEMO

CSS

1 Trước hết bạn và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:3px; 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='http://4.bp.blogspot.com/-J2cQSbi-ix8/VbeTKdbGcwI/AAAAAAAACQo/_AqyOQSZR_I/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 http://4.bp.blogspot.com/-J2cQSbi-ix8/VbeTKdbGcwI/AAAAAAAACQo/_AqyOQSZR_I/s1600/back-to-top-iris-14.png

Một số giao diện Back to top đẹp cho bạn lựa chọn

• DOWNLOAD

Version 2

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

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!

Password: iris-tips.blogspot.com
Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm