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

(Traidatmui.com) - 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://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/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'>

Chúc bạn thành công

Xem khác cùng chủ đề

2 nhận xét | Viết lời bình

Admin
8/07/2011 06:50:00 CH Trả lời

Bài viết trên đã được cập nhật thêm nút xuống cuối trang hiệu ứng Jequery scroll, nếu bạn cần có thể sử dụng ngay.lleu

11/15/2011 10:54:00 CH Trả lời

Bạn oi...nut ve cuoi trng khong co tac dung .

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang