Để theo kịp xu hướng lướt web chủ yếu trên mobile của người sử dụng chúng ta cũng cần thay đổi code cho phù hợp.
Dưới đây là một số code về tạo tiện ích cuộn lên đầu trang cho blogspot.Code ta có thể dùng đơn thuần là css hoặc sử dụng javascript.
Với code css có ưu điểm không ảnh hưởng tốc độ load của trang nhưng với việc sử dụng đoạn javascript nhỏ gọn thì tốc độ load trang cũng không hề hấn gì.
1- Code chỉ với css
Để cài đặt tiện ích lên đầu trang này bạn chỉ việc dán đoạn code sau đây ngay trên thẻ </body> là xong.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" ><img alt='back to top' title="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHx6_aPkZzsTWUHOdg9SEqxYpJP3KHeIcMtObG-quO92NJBsx1T7fRou9t5kRr-DHw-96iJBfOvc3TakBEU8RYZ6zQUOnKlblnnsygFXRM_46gMFmBOeNxP0urmEGbxegypsI9d5GB7Y/s1600/top101.png"/></a>
2- Code với javascript và jquery
Bước 1:
Chèn file jquery vào trước thẻ </head>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
Bước 2:
Chèn đoạn javascript sau vào trước thẻ </body>
<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);
return false})});</script><a id='noop-top' style='display: none; position: fixed;
bottom: 5px; right:5px; cursor:pointer;'><img alt='back to top' title="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHx6_aPkZzsTWUHOdg9SEqxYpJP3KHeIcMtObG-quO92NJBsx1T7fRou9t5kRr-DHw-96iJBfOvc3TakBEU8RYZ6zQUOnKlblnnsygFXRM_46gMFmBOeNxP0urmEGbxegypsI9d5GB7Y/s1600/top101.png"/></a>-Trong đó:
- bottom:5px là vị trí ảnh tính từ phía chân màn hình tính lên.
- right:5px là vị trí của ảnh so với lề phải.
3- Code cuộn lên đầu trang với Rocket glide cùng hiệu ứng mượt mà đẹp mắt
DEMO
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn chỉnh sửa HTML
4- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>.
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDq4bh-2vy0sAFU1GeVvfdeLQdPb_6XTg7Ja0CoVP6G5R1Os93fEbY0886uPpO83tmhvqZI-X4WLC_EAPX4J9qxf9skAn3s-wMo-yp7PhFk3H-9spKejScjkUww2MTa5n4bUlLu10ocA/s1600/rocket.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDq4bh-2vy0sAFU1GeVvfdeLQdPb_6XTg7Ja0CoVP6G5R1Os93fEbY0886uPpO83tmhvqZI-X4WLC_EAPX4J9qxf9skAn3s-wMo-yp7PhFk3H-9spKejScjkUww2MTa5n4bUlLu10ocA/s1600/rocket.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}5- Thêm thư viện jquery vào trước thẻ </head> (với những blog đã có rồi thì bỏ qua bước này)
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
6- Chèn đoạn code sau vào trước thẻ đóng </body>
<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ></a>
<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>7- Sau đó bấm Lưu Mẫu.
Lưu ý
Với 2 code đầu tiên bạn có thể thay link ảnh theo ý mình.
Vào ĐÂY
Để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào
4- Cuộn lên đầu trang với javascript không css, html và jquery
Chèn đoạn javascript sau vào trước thẻ đóng </body>
<script>
//<![CDATA[
// Back to top
!function(){var t=document.querySelector(".header").clientHeight,o=document.querySelector("#main"),n=document.createElement("a");o.clientHeight,void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop;n.innerHTML="⇑",n.classList.add("topsider"),n.setAttribute("href","#top"),o.style.position="relative",n.style.position="fixed",n.style.zIndex="9999",n.style.right=0,n.style.bottom=0,n.style.backgroundColor="#00aa00",n.style.textDecoration="none",n.style.color="white",n.style.padding="0 10px",n.style.fontSize="22px",window.addEventListener("scroll",function(e){window.pageYOffset>t?(o.appendChild(n),n.style.opacity=1):n.style.opacity=0,window.pageYOffset==document.documentElement.scrollHeight-window.innerHeight&&(n.style.opacity=0)}),n.addEventListener("click",function(e){sglScrollmation(e),n.style.opacity=0})}();
//]]>
</script>