Chia sẻ thủ thuật blogspot - blogger

luat1x1

10/21/2011

Tạo nút lên đầu trang với hiệu ứng Jequery scroll

 Thông thường khi xem một trang web/blog chúng ta thường lăn chuột để xem những nội dung trên đó. Sau khi lăn chuột xem nội dung đến cuối trang chúng ta lại phai lăn chuột hoặc kéo thanh bên để trở về đầu trang. Điều đó có thể khắc phục bằng cách tạo nút trở về đầu trang ngay trên blog. Với nút lên đầu trang thì người dùng chỉ việc click vào nút này thì người dùng trở về lên đầu trang một cách nhanh chóng. Hơn nữa với thủ thuật này thì trang blog của bạn sẽ được cuộn với hiệu ứng Jequery trông rất đẹp mắt.

1. Đầu tiên bạn phải đăng nhập tài khoản blogger
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Thêm code bên dưới vào sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}}});});
//]]>
</script>

4. Bạn tìm đến thẻ <body> và thay nó thành code bên dưới
<body id='top'>

5. Bây giờ bạn hãy thêm code bên dưới vào trước thẻ </body>
<div id='goingtop'>
<a href='#top' title='Go Top'><img border="0" src='http://lh5.ggpht.com/_BTztXRwC9ik/TG__GsG7EvI/AAAAAAAAC4o/hNpBt0iyo3w/top.png' style='right:20px; bottom:20px; position: fixed;'/></a></div>

Bạn có thể thay link ảnh trên thành link ảnh của mình (dòng màu xanh)

6. Cuối cùng save template lại là xong

» Cập nhật (08/08/2011) thêm nút xuống cuối trang hiệu ứng Jequery scroll

Ở trên mình chỉ hướng dẫn bạn thực hiện chỉ với 1 nút cuộn lên đầu trang thôi, còn nếu muốn cuộn xuống cuối trang thì làm thế nào? Đó chính là lý do mình Update thêm bài viết này. Nếu bạn muốn tạo 2 nút cuộn lên đầu trang và xuống cuối trang với hiệu ứng cuộn bằng Jquery như trên thì thực hiện vài bước đơn giản như bên dưới.

Sau khi vào phần thiết kế (Design) bạn chọn thêm tiện ích, thêm 1 HTML/Javascript và thêm vào code bên dưới.
<style>
.button_top{cursor: pointer;
position:fixed;
background:transparent url(http://lh5.ggpht.com/_BTztXRwC9ik/TG__GsG7EvI/AAAAAAAAC4o/hNpBt0iyo3w/top.png) no-repeat top left;
bottom:63px;
opacity:0.7;
right:10px;
width:48px;
height:48px;
}
.button_down{cursor: pointer;
position:fixed;
background:transparent url(https://lh3.googleusercontent.com/-5xs7ZseTRBk/Tj85HR76xuI/AAAAAAAAAfY/Q5FzNFrWAhM/bottom.png) no-repeat top left;
width:48px;
height:48px;
bottom:15px;
opacity:0.7;
right:10px;
}</style>
<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>

<script>
$(function() {
var $elem = $('#content');

$('#button_top').fadeIn('slow');
$('#button_down').fadeIn('slow');

$(window).bind('scrollstart', function(){
$('#button_top,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_top,#button_down').stop().animate({'opacity':'1'});
});

$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#button_top').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
<div style="display:none;" class="button_top" id="button_top"></div>
<div style="display:none;" class="button_down" id="button_down"></div>


Xong save tiện ích lại, bạn vào chỉnh sửa HTML thêm id='scroll' vào thẻ <body> như bên dưới.
<body id='scroll'>
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top