- Bài viết này mình chia sẻ các bạn code
tạo nút ‘Lên đầu trang’ hay còn gọi là ‘Back to Top’ hay ‘Scroll
to Top’. Mục đích giúp người duyệt web có thể di chuyển nhanh về đầu trang web.
- Chức năng chính của thủ thuật này chính là tạo ra một
nút mũi tên lên, nằm ở góc dưới bên phải màn hình. Mục đích giúp người duyệt
web di chuyển nhanh về đầu trang.
Cách sử dụng cực đơn giản:
- Đó là các bạn chỉ cần vài trang quản trị Blogger -> Bố cục và thêm tiện ích HTML/javascript rồi dán đoạn code dưới đây vào và lưu lại là xong.
<a class='showrocket' href='javascript:void(0);'
id='rocketmeluncur'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var
e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var
l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else
t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html,
body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var
e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>
<style>
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://i.imgur.com/XovIjrJ.png)
50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s
cubic-bezier(.6,.04,.98,.335),opacity .6s
cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s
cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s
cubic-bezier(.6,.04,.98,.335),opacity .6s
cubic-bezier(.6,.04,.98,.335),-moz-transform .6s
cubic-bezier(.6,.04,.98,.335);transition:visibility .6s
cubic-bezier(.6,.04,.98,.335),opacity .6s
cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur
i{display:block;margin-top:48px;height:14px;background:url(http://i.imgur.com/XovIjrJ.png)
50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform
.2s;-moz-transition:-moz-transform .2s;transition:transform
.2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50%
0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50%
100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s
infinite;animation:flaming .7s
infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50%
-62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50%
100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}
#scrolltop{display:none}
</style>
Facebook