Thêm nút trượt đầu trang, cuối trang cho web hay blog
Có rất nhiều trang có button trượt đầu trang hay cuối trang để tiện cho người đọc.
Hôm nay, mình sẽ giới thiệu với mọi người cách làm 2 button up, down này. (cuộn về đầu trang hoặc cuối trang).
Cách 1: Tham khảo từ zlatanblog.
Thêm CSS (Add trước ]]></b:skin> với blogger)
#go_top{ display:block; width:31px; height:31px; position:fixed; background-color:#2ccaae; bottom:15px; right:15px;}
/*-- tạo mũi tên --*/#go_top:before{ content:""; position:Absolute; width:0; height:0; border:11px solid transparent; border-bottom:11px solid white; left:5px; top:-8px;}
#go_top:after{ content:""; position:Absolute; width:10px; height:17px; background-color:white; left:11px; top:14px;}
Add Jquery trước </head> hoặc sau <head>. (Kiểm tra trong code nếu đã có thì bỏ qua)
<scriptsrc="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Add code này trong phần body của trang web hay blog của bạn
<script type="text/javascript">
<a href="#" id="go_top"></a>(funcion(){ // Cuộn trang lên với scrollTop $('#go_top').click(function(){ $('body,html').animate({scrollTop:0},400); return false; })})(jQuery)
/ Ẩn hiện icon go-top$(window).scroll(function(){ if( $(window).scrollTop() == 0 ) { $('#go_top').stop(false,true).fadeOut(600); }else{ $('#go_top').stop(false,true).fadeIn(600); }});
</script>
Cách 2: Với cách này thì có cả button down.
Thao tác Add vào blog cũng như cách 1.
Đầu tiên cũng cần Add CSS trước:
<style type='text/css'>
.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoA8-5JtVGfFKxks3tFh-GAPURUC-asJO3eN5VhpbwOy1u-h2lnQeLZhEUVO_qedBattdgjEUKgBbdOk25Cm9BA7C-GH17kluYQiY1_Ay28AcqbvzYRsWo49KW5WAzg2mshHhkFQWbOxk/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
opacity:0.7;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
top:600px;
right:100px;
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT1beZW4kwZA-lSdV5D9bhghNCOjhYmpgfst9EQVPlG6pYcz5VrBs9Gn8Op-9_lwKIQ3lOTk3tW5t8-_iSdZOVN40ufytAyZhlu4mu29Tr7ZtS42mc2OWZiDd9dFZlRTsgJam_DPP2vM/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
top:600px;
right:50px;
opacity:0.7;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
Thêm đoạn code này vào trước </head> hay trong <body> đều được
<script src='http://myhostingjs.googlecode.com/files/scroll-startstop.events.jquery.js' type='text/javascript'/>Cuối cùng là add code html này trong body
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function() {
var $elem = $('#noidung');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
<div style="display:none;" class="nav_up" id="nav_up"></div>
<div style="display:none;" class="nav_down" id="nav_down"></div>
Chú ý: Bạn nên lưu lại tất cả các file js vào host của bạn để đảm bảo dữ liệu.
Cảm ơn bạn đã quan tâm bài viết. Nếu bạn không làm được thì có thể để lại comment, mình sẽ hướng dẫn.
- Rất vui khi được mọi người nhận xét, đóng góp ý kiến để bài viết chất lượng hơn.
- Các ý kiến mang nội dung xấu, tính chất spam, chia rẽ, vi phạm sẽ bị xóa mà không nhắc nhở.
- Comment và share bài viết nếu bạn cảm thấy hay và thú vị.
- Không quên ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này.