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>

This is box title
<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

This is box title
<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>

This is box title
<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>

Bước 4: Save lại và Kiểm Tra

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here