• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo nút trượt lên đầu và cuối trang web bằng jQuery

6
25/10/2010

Dưới đây là một cách tạo nút lên đầu hoặc cuối trang web bằng 1 cái nhấp chuột đơn giản. Thủ thuật này sử dụng các sự kiện cuộn đặc biệt qua thư viện jQuery từ James Padolsey. Có 2 nút cố định nằm ở đáy bên trái trang web, mỗi nút có chức năng di chuyển xuống hoặc lên trong trang web. Nếu bạn kéo thanh cuộn trang web thì 2 nút này mờ ẩn dần và cho hiệu ứng mềm mại đẹp mắt.


Xem demo.

Sau đây là các bước thực hiện thủ thuật.

1. Bước 1: Dán đoạn code CSS này vào trước thẻ </head> (áp dụng cho cả Blogger).
<style type="text/css">
.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://www.tympanus.net/scrollupdown/images/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:30px;
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);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://www.tympanus.net/scrollupdown/images/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:70px;
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>
Bước 2: Dán toàn bộ đoạn code bên dưới vào trước thẻ </body> (áp dụng cho cả Blogger). Đối với Blogger có thể dán toàn bộ đoạn code vào một widget HTML/JavaScript nằm dưới phần footer.
<script src="http://www.tympanus.net/scrollupdown/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://www.tympanus.net/scrollupdown/scroll-startstop.events.jquery.js" type="text/javascript"></script>
<script>
$(function() {
var $elem = $('#content');

$('#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>
Hy vọng với thủ thuật này, các bạn sẽ giúp ích nhiều cho trang web của bạn.

{6 bình luậnAdd yours ?}

06:04:00, 13 thg 3, 2012

MỜI BẠN TRAO ĐỔI LINK VÀ THEO DÕI THÀNH VIÊN GOOGLE

Reply
09:07:00, 10 thg 8, 2012

Code quá tuyệt - ghé thăm diễn đàn kết nối yêu thương tại: http://tai-it.com

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn