Một website có nội dung tương đối dài hoặc rất dài, sẽ khiến người đọc phải kéo chuột xuống liên tục và không nắm rõ được nội dung bên dưới. Như vậy, rất dễ gây nhàm chán cho người dùng vì có thể một bài viết quá dài và không có nút Go Up Và Go Down cho website là một bất tiện lớn
Vậy làm sao để tạo Nút Buuton lên và xuống cho website của mình. Hãy theo dõi nhé

Tao Button Go Up Và Go Down Cho Blogspot

Hãy Thực Hiện Theo Các Bước Sau

Bước 1: Đặt đoạn code bên dưới trước </head>

<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

//]]>

</script>

Bước 2: Chọn một trong hai loại css bên dưới cho nút Button lên xuống và bỏ <style></style> nếu đặt trong ]]></b:skin ( Nếu để <body></body> thì giữ nguyên <style></style> )

Version 1

<style type='text/css'>

/* Go Up and Down */

#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}

#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}

#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}

#top{position:absolute;top:0}

</style>

Version 2

<style type='text/css'>

/* Go Up and Down */

#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}

#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}

#scrollToTop a:hover{color:rgba(0,0,0,0.5)}

#top{position:absolute;top:0}

</style>

Bước 3: Đặt đoạn code bên dưới vào trước </body>

<ul id='scrollToTop'>

<li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>

<li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>

</ul>

<div id='top'/>

<div id='bottom'/>

<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});

$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});

//]]>

</script>