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

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='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