Nút Smooth Scroll to Top với hiệu ứng từ Jquery

Trên blog của bạn đôi khi có những bài viết rất dài hay có rất nhiều bình luận, khi độc giả muốn đi lên phần Header thì phải kéo con cuộn rất nhiều lần gay sự phiền toái. Hôm nay mình xin giới thiệu mẫu Smooth Scroll to Top với hiệu ứng trượt thừ Jquery.

#1 - Thêm Jquery JavaScript Plugin

1. Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
2. Tìm thẻ </head>
3. Dán đoạn Jquery dưới vào trên thẻ vừa tìm được

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

Nếu blog của bạn đã có đoạn Jquery trên rồi thì bỏ qua bước này.

#2 - Thêm HTML

1. Tìm thẻ </body> đối với mẫu Simple của Blogger và </body> đối với các mẫu khác

2. Dán code dưới vào trên thẻ vừa tìm được

<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTPWnex_ZQq0OnqJ9uGJWAhnhoMR2yWKVfrkkxRWf6igosr5pakqWvXgiZ6RyJZiaYCUzw3GzLLZMuK9ESR68GhPLDLh58RyVaHnRHrAI5SvdnHKymgNXPaHt3CfYKcv5muE1E-zj6cm_K/) no-repeat left top;}
#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTPWnex_ZQq0OnqJ9uGJWAhnhoMR2yWKVfrkkxRWf6igosr5pakqWvXgiZ6RyJZiaYCUzw3GzLLZMuK9ESR68GhPLDLh58RyVaHnRHrAI5SvdnHKymgNXPaHt3CfYKcv5muE1E-zj6cm_K/) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src="http://widgets.way2blogging.org/blogger-widgets/w2b-jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery); 
/*]]>*/
</script>

3. Save và xem kết quả.