Các loại nút cuộn về đầu trang

Mõ

Cấp bậc: Tích cực

Bài viết : 283

Danh vọng : 470

Uy tín : 15

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Kiểu FMvi v.2, dùng #top, nút scroll luôn hiển thị nhưng chỉ thực sự có tác dụng khi bạn không còn ở đầu trang

- Với nền tối, dùng nút Các loại nút cuộn về đầu trang Scroll10

; nền sáng, dùng nút Các loại nút cuộn về đầu trang Scroll10

Code:: <a href="#top" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 1000);return false" style="background:none repeat scroll 0 50% transparent;bottom:5px;position:fixed;right:5px"> <img src="http://i43.servimg.com/u/f43/16/03/04/56/scroll10.png" /> </a>

FMvi chèn vào overall_footer_end. Còn bạn có thể chèn bất cứ chỗ nào bạn thích.

Hoặc có thể thay link hình khác:

- Kiểu yume Các loại nút cuộn về đầu trang Top_icon

hoặc https://i.servimg.com/u/f30/17/60/79/91/top_ic10.gif

- Kiểu 123mua Các loại nút cuộn về đầu trang Btn_top

hoặc https://i.servimg.com/u/f30/17/60/79/91/btn_to10.jpg

- Kiểu discuz Các loại nút cuộn về đầu trang Scrolltop

hoặc https://i.servimg.com/u/f30/17/60/79/91/scroll10.png

LQ2

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 547

Danh vọng : 1176

Uy tín : 51

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Code sau dùng cho cả cuộn lên đầu trang hoặc chuyển xuống chân trang. Demo đặt nút bên cạnh phải body:

Đặt trong CSS:

Code:: /* Menu di chuyen */ #menudichuyen { position: fixed; left: 50%; margin-left: 487px; bottom: 100px; background: #333 url(http://i49.servimg.com/u/f49/16/29/88/81/action10.png) 0 50% no-repeat; background: rgba(0,0,0,0.5) url(http://i49.servimg.com/u/f49/16/29/88/81/action10.png) 0 50% no-repeat; padding: 0 5px 0 15px; border-radius: 0 10px 10px 0; } #menudichuyen li { list-style: none; height: 30px; width: 22px; } .lentren-top{ background: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl12.png") -63px 50% repeat-x; width: 20px; height: 20px; cursor:pointer; } .xuongduoi-bottom{ background: url("http://i48.servimg.com/u/f48/13/58/60/43/newsfl12.png") -42px 50% repeat-x; width: 20px; height: 20px; cursor:pointer; } .lentren-top:hover{background-position: -21px 50%;} .xuongduoi-bottom:hover{background-position: 0 50%;}

Lưu ý: Bạn có thể thay đổi màu sắc và độ trong suốt bằng cách thay đổi thuộc tính rgba [ví dụ: LucQuan2 Forum có màu chủ đạo là #8B0000, tương đương với mã RGB là 139,0,0 và gần giống màu Firebrick - thay đổi thêm độ trong suốt là 0.3 -> thành rgba (139,0,0,0.3) ]

Đoạn code sau có thể đặt trong index_body hoặc overall_footer_end:

Code:: <div id="menudichuyen"> <ul> <li class="lentren-top" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 1200);" title="Chuyển lên đầu trang"></li> <li class="xuongduoi-bottom" onclick="$('html,body').animate({scrollTop: $('#pun-foot').offset().top}, 1200);" title="Chuyển xuống cuối trang"></li> </ul> </div>

Lưu ý: Muốn dùng cho phpBB, bạn phải thay đổi id pun-foot cho phù hợp

LQ2

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 547

Danh vọng : 1176

Uy tín : 51

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Các loại nút cuộn về đầu trang Up_rocket

Chèn đoạn này vào overall_footer_begin:

Code:: <div id="totop" style="display: block; "></div> <div id="totop2" style="top: 384px; display: block; "></div> <script type="text/javascript" src="../*.js"></script> <style> #totop,#totop2{ position: fixed;right: 0;bottom: 10px; width: 149px;height: 249px;overflow: hidden; cursor: pointer;display: none; background: url(https://dl.dropbox.com/u/24716029/images/up_rocket.png) no-repeat 0px 0; z-index: 999; } #totop2{ background: url(https://dl.dropbox.com/u/24716029/images/up_rocket.png) no-repeat -149px 0; }</style>

Java Script: đặt vào đâu đó rồi thay đường dẫn cho "../*.js" ở trên

Code:: $(function(){ $('body').append(' ') $('#totop').hover(function(){ $('#totop2').fadeIn().mouseout(function(){ $(this).fadeOut(200) }) }) var defaultTop=$(window).height()-10-249//10 Vị trí cạnh bottom ban đầu, 249 là chieu cao $(window).resize(function(){ defaultTop=$(window).height()-10-249 }) var ranPo=['-298px 0','-447px 0','-596px 0','-745px 0'] $(window).scroll(function(){ var $top=$(window).scrollTop() if($top>50){ $('#totop').fadeIn(100) $('#totop2').css('top',defaultTop) }else{ $('#totop,#totop2').fadeOut(100) } }) $('#totop2').click(function(){ timeranPo=window.setInterval(function(){ $('#totop2').css({'background-position':ranPo[Math.floor(Math.random()*ranPo.length)],'display':'block'}) },200) setTimeout(function(){ $('html,body').stop().animate({scrollTop:'50px'},400,function(){ $('#totop2').stop().animate({'top':'-250px'},400,function(){ clearInterval(timeranPo) $('#totop2').css('background-position','-149px 0').hide() }) }) },800) }) })

LQ2

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 547

Danh vọng : 1176

Uy tín : 51

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Demo:

Thêm vào trong CSS:

Code:: /* Nút lên đầu trang */ #go_top { display: block; width: 31px; height: 31px; position: fixed; background-color:#2ccaae; bottom:47px; 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;} /* Nút xuống cuối trang */ #go_bottom { display: block; width: 31px; height: 31px; position: fixed; background-color: #2ccaae; bottom:15px; right:15px;} /*-- tạo mũi tên --*/ # go_bottom: before { content: ""; position: Absolute; width: 10px; height: 17px; background - color: white; left: 11px; top: 14px;} #go_bottom: after { content: ""; position: Absolute; width: 0; height: 0; border: 11px solid transparent; border-bottom: 11px solid white; left: 5px; top: 8px;}

Thêm vào overall_footer_end:

Code:: <a href="#" id="go_top"></a>  <a href="#pun-foot" id="go_bottom"></a>[/url]

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Chỉ dùng Script: nút scroll chỉ hiện lên khi bạn không còn ở đầu trang

Kiểu 1.

Nút Các loại nút cuộn về đầu trang Goon

chỉ hiện lên khi bạn không còn ở đầu trang

Code:: <script src="https://dl.dropbox.com/u/24716029/libjs/moveup.js"></script>

Kiểu 2.

Các loại nút cuộn về đầu trang Vtlai_scroll_up

chỉ hiện lên khi bạn không còn ở đầu trang,
Các loại nút cuộn về đầu trang Vtlai_scroll_down

chỉ hiện lên khi bạn không còn ở cuối trang.

Code:: <script src="https://dl.dropbox.com/u/24716029/libjs/up_vtlai.js"></script>

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Nút cuộn

mặc định sẽ nằm cạnh trái của body, bạn có thể vào trong CSS để thay đổi thuộc tính left.

Thêm vào trong CSS:

Code:: /* Go top */ #top_forum { background:url(http://i48.servimg.com/u/f48/16/18/15/10/120.gif) no-repeat; } #top_forum:hover { background:url(http://i48.servimg.com/u/f48/16/18/15/10/119.gif) no-repeat; } #toppage { position:fixed; bottom:80px; left:0px; cursor:pointer; display:block; opacity:1px; }

Thêm vào overall_footer_end:

Code:: <a id="toppage" style="display: block; "> <div style="width:19px;height:57px" id="top_forum"></div> </a> <script type="text/javascript"> $(function () { $.fn.scrollToTop = function () { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function () { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function () { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function () { $("#toppage").scrollToTop(); }); </script>

Nuts

Cấp bậc: Tích cực

Bài viết : 300

Danh vọng : 648

Uy tín : 23

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Sưu tầm 10 style đơn giản:

Các loại nút cuộn về đầu trang 002

Code:: <div id="navigation_up_down_37339"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/1-37339-right.js"></script></div>

Code:: <div id="navigation_up_down_79523"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/2-79523-right.js"></script></div>

Code:: <div id="navigation_up_down_89846"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/3-89846-right.js"></script></div>

Code:: <div id="navigation_up_down_8685"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/4-8685-right.js"></script></div>

Code:: <div id="navigation_up_down_60107"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/5-60107-right.js"></script></div>

Code:: <div id="navigation_up_down_30337"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/6-30337-right.js"></script></div>

Code:: <div id="navigation_up_down_21622"><<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/7-21622-right.js"></script></div>

Code:: <div id="navigation_up_down_42562"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/8-42562-right.js"></script></div>

Code:: <div id="navigation_up_down_90798"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/9-90798-right.js"></script></div>

Code:: <div id="navigation_up_down_58760"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/10-58760-right.js"></script></div>

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Demo chia sẻ từ www.cntt-k3.biz

Chèn vào footer_end:

Code:: <a style="display: inline;" id="top-link" href="#top">Top of Page</a>

Chèn codes này vào css :

Code:: #top-link { background: url("http://www.jayvietnam.com/styles/inkd/yo.png") no-repeat scroll left top transparent; border: medium none; bottom: 10px; display: none; height: 125px; overflow: hidden; position: fixed; right: 10px; text-decoration: none; text-indent: -999px; width: 66px; }

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Dùng cặp ảnh này hoặc chọn lựa ảnh khác, tùy:

Các loại nút cuộn về đầu trang Top10

Bỏ vào overall_footer, trước thẻ /body:

Code::  <div id='top-buttom-image'> <a href='javascript:scroll(0,0)' title='Lên đầu trang'><img src="http://i48.servimg.com/u/f48/17/58/45/30/top10.png" alt="top"/></a><br/> <a href='javascript:scroll(0,9999999)' title='Xuống cuối trang'><img src="http://i48.servimg.com/u/f48/17/58/45/30/down10.png" alt="down"/></a> </div>

Thêm vào CSS:

Code:: /* back-top and back-down */ #top-buttom-image { position:fixed; _position: absolute; bottom:25px; right:5px; z-index:1000; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Ảnh demo:

Chèn vào CSS:

Code:: /* Nút lên, xuống */ #scroll{ position:fixed; right:0; top:40%; } #scroll a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; white-space: nowrap; color: #6B6B6B; padding: 5px; margin: 3px; background: -moz-linear-gradient(top,#FCFCFC 0%,#E3E4E4); background: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC),to(#E3E4E4)); border-radius: 2px; border: 0px solid #BEBEBE; box-shadow: -1px 1px 1px rgba(000, 000, 000, 0.3),inset 0px 0px 0px rgba(190, 190, 190, 0.9); text-shadow: 0px 0px 0px rgba(000, 000, 000, 0),0px 0px 0px rgba(255, 255, 255, 0); }

Chèn vào overall_footer_end, trước thẻ </body>:

Dùng cho invision:

Code:: <div id="scroll"> <a href="#submenu"><strong>△</strong></a> <br><br> <a href="#gfooter"><strong>▽</strong></a> </div>

Dùng cho punBB:

Code:: <div id="scroll"> <a href="#top"><strong>△</strong></a> <br><br> <a href="#pun-foot"><strong>▽</strong></a> </div>

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Ảnh demo :

Các loại nút cuộn về đầu trang Top10

Rất đơn giản. Chèn vào overall_footer_end hoặc bất cứ chỗ nào bạn thích:

Code:: <script type="text/javascript"> var sheight = $(window).height(); var maxheight = $("body").height(); $(function () { $.fn.scrollToMiddle = function () { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "maxheight/2-sheight/2") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function () { if ($(window).scrollTop() == "maxheight/2-sheight/2") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function () { $("html, body").animate({ scrollTop: maxheight / 2 - sheight / 2 }, "slow") }) } }); $(function () { $.fn.scrollToBottom = function () { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "maxheight") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function () { if ($(window).scrollTop() == "maxheight") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function () { $("html, body").animate({ scrollTop: maxheight }, "slow") }) } }); $(function () { $.fn.scrollToTop = function () { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function () { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function () { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function () { $("#toMiddle").scrollToMiddle(); $("#toTop").scrollToTop(); $("#toBottom").scrollToBottom(); }); </script> <div style="bottom: 55px;clip: inherit;position: fixed;right: 5px;"> <a id="toTop" original-title="" style="display: inline; "><img alt="Đầu trang" border="0" src="http://r22.imgfast.net/users/2211/12/43/96/album/top10.png"></a> <br> <a id="toMiddle" original-title="" style="display: inline; "><img alt="Giữa trang" border="0" src="http://r22.imgfast.net/users/2211/12/43/96/album/middle10.png"></a> <br> <a id="toBottom" original-title="" style="display: inline; "><img alt="Cuối trang" border="0" src="http://r22.imgfast.net/users/2211/12/43/96/album/bottom10.png"></a> </div>

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Ảnh demo:

Chèn vào CSS:

Code:: /*Thanh công cụ */ .c3pag {-moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; background: #F4FFBF; border: 2px solid#ccc; bottom: 0; padding: 6px!important; font-size: 11px; font-weight: 700; padding: 15px; position: fixed; right: 0 } .c3pag img { -moz-transition-duration: .5s; -o-transition-duration: .5s; -webkit-transition-duration: .5s; opacity: .8; transition - duration: .5s } .c3pag img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); opacity: 1; transform: rotate(360deg); }

Nếu muốn thêm hiệu ứng chuột, cũng chèn vào CSS:

Code:: a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), default;color:#FF6600;}

Chèn vào overall_footer_end hoặc index_body, trước thẻ </body>

Code:: <style type="text/css">.c3pag {padding:6px!important}</style> <div class="c3pag"> <a href="/donate" onmouseover="showtip('Donate a coffee');" onmouseout="hidetip();" style=""><img height="24" src="http://images.findicons.com/files/icons/101/old_school/128/java_old_school.png"></a> <a href="/donate" style=""><img height="10" src="http://2img.net/i/fa/subsilver/empty.gif"></a> <a href="#top" onmouseover="showtip('Top');" onmouseout="hidetip();" style=""><img height="24" src="http://icons.iconarchive.com/icons/milosz-wlazlo/boomy/48/up-icon.png"></a> <a href="#baimoi" onmouseover="showtip('Bài viết mới');" onmouseout="hidetip();" style=""><img height="24" src="http://icons.iconarchive.com/icons/milosz-wlazlo/boomy/48/edit-icon.png"></a> <a href="#chatbox" onmouseover="showtip('Chatbox');" onmouseout="hidetip();" style=""><img height="24" src="http://icons.iconarchive.com/icons/milosz-wlazlo/boomy/48/chat-icon.png"></a> <a href="#thongke" onmouseover="showtip('Thống kê Forum');" onmouseout="hidetip();" style=""><img height="24" src="http://icons.iconarchive.com/icons/milosz-wlazlo/boomy/48/help-icon.png"></a> <a href="#bottom" onmouseover="showtip('Bottom');" onmouseout="hidetip();" style=""><img height="24" src="http://icons.iconarchive.com/icons/milosz-wlazlo/boomy/48/down-icon.png"></a> </div>

Lưu ý sửa tên liên kết để di chuyển cho phù hợp.

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Ảnh demo:

Chèn vào CSS (có thêm hiệu ứng mờ - núp):

Code:: /*Thanh công cụ */ .c3pag{ position:fixed; bottom:20px; right:-5px; width:20px; height:130px; background:#FFF; border:2px solid #ccc; border-right:0 solid #ccc; opacity:0.7; padding:6px!important; -moz-border-radius-topleft:10px; -khtml-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -khtml-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -moz-opacity:0.4; } .c3pag:hover{ -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -moz-opacity:1;opacity:1; filter:alpha(opacity=100); right:0!important; } .c3pag img { -moz-transition-duration: .5s; -o-transition-duration: .5s; -webkit-transition-duration: .5s; opacity: .8; transition-duration: .5s; } .c3pag img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); opacity: 1; transform: rotate(360deg); }

Nếu muốn thêm hiệu ứng chuột như Các loại nút cuộn về đầu trang Glow

Các loại nút cuộn về đầu trang RedGlow_link_select

, cũng chèn vào CSS:

Code:: body,a{cursor: url("https://dl.dropbox.com/u/24716029/images/Glow.cur"), progress;} img{cursor: url("https://dl.dropbox.com/u/24716029/images/RedGlow.cur"), progress;} a:hover {cursor: url("https://dl.dropbox.com/u/24716029/images/RedGlow_link_select.cur"), progress;}

Chèn vào overall_footer_end hoặc index_body, trước thẻ </body>

Code:: <style type="text/css">.c3pag {padding:6px!important}</style> <div class="c3pag"> <a href="#top" onmouseover="showtip('<span>Lên đầu trang!</span>');" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/up-icon.png" style="opacity: 1; "></a> <a href="#baimoi" onmouseover="showtip('<span>Bài viết mới!</span>');" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/edit-icon.png" style="opacity: 1; "></a> <a href="#giaitri" onmouseover="showtip('<span>Giải trí & thư giãn!</span>');" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/chat-icon.png" style="opacity: 1; "></a> <a href="#thongke" onmouseover="showtip('<span>Thông kê Truy cập!</span>');" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/help-icon.png" style="opacity: 1; "></a> <a href="#bottom" onmouseover="showtip('<span>Xuống cuối Trang!</span>');" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/down-icon.png" style="opacity: 1; "></a> </div>

Lưu ý sửa tên liên kết để di chuyển cho phù hợp.

Còn đây là code đã convert cho punBB dùng trên ilib.forumvi.com, tương thích với IE :

CSS:

Code:: /*Thanh công cụ */ .c3pag{ position: fixed; bottom: 50px; right: -5px; width: 20px; height:145px; background: #F4FFBF; border:2px solid #CCC; border-right:0; opacity:0.6; padding:6px!important; border-radius:10px 0 0 10px; } .c3pag:hover{ -webkit-transition: all 1s ease; -moz-transition:all 1s ease; opacity: 1; filter:alpha(opacity=100); right:0!important; } .c3pag img { border:none; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; opacity: 0.8; transition-duration: .5s; } .c3pag img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); opacity: 1; transform: rotate(360deg); }

HTML:

Code::  <div class="c3pag"> <a href="#top" onclick="$('html,body').animate({scrollTop: $('#top').offset().top}, 1000);" title="Chuyển lên đầu trang" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/up-icon.png" style="opacity: 1; "></a> <a href="/donate" title="Tham gia tài trợ" onmouseout="hidetip();" style=""><img height="24" src="http://tennistournament.kimatkins.net/images/menu/24/donate.png"></a> <a href="#recentnew" title="Tình hình diễn đàn" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/help-icon.png" style="opacity: 1; "></a> <a href="#chatbox" title="Cùng nhau tán gẫu" onmouseout="hidetip();" style=""><img height="24" src="http://doberman-chat.com/community/styles/default/xenforo/smilies/cold.gif"></a> <a href="#pun-info" title="Thống kê diễn đàn" onmouseout="hidetip();" style=""><img height="24" src="http://www.cn-g.de/forum/icon/statisticsM.png" style="opacity: 1; "></a> <a href="#bottom" onclick="$('html,body').animate({scrollTop: $('#pun-foot').offset().top}, 1000);" title="Chuyển xuống cuối trang" onmouseout="hidetip();" style=""><img height="24" src="http://i1196.photobucket.com/albums/aa406/duy0307/down-icon.png" style="opacity: 1; "></a> </div>

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Ảnh demo từ afamily.vn : Các loại nút cuộn về đầu trang ScrollTop

Chèn vào CSS:

Code:: /* Về đầu trang */ #scroll_top:hover { opacity: 1; } #scroll_top { background: url("http://afamily.vn/Images/scrollTop.png") no-repeat; cursor: pointer; display: none; height: 46px; opacity: 0.5; position: fixed; right: 10px; top: 90%; width: 46px; z-index: 888; }

Chèn vào overall_footer: afamily sử dụng tới 2 js cho nút cuộn này, bạn nên bóc tách ra và gộp vào làm 1

Code:: <script type="text/javascript" src="http://afamily.vn/Scripts/slimScroll.min.js?v=1"></script> <script type="text/javascript" src="http://afamily.vn/Scripts/main_21_03_2012.js?v=1"></script> <div id="scroll_top" style="display: block"></div>

kẻ đương thời Ưu tú

Cấp bậc: Ưu tú

Giới tính : Nam

Bài viết : 665

Danh vọng : 1151

Uy tín : 42

Tường nhà

Bài viết

Kết bạn

Ngăn cấm

Ảnh demo từ afamily.vn : Các loại nút cuộn về đầu trang Top_icon

Chèn vào CSS:

Code:: /* Về đầu trang */ #top-link { background: url("http://static.yume.vn/notification/20120105/css/ym2navbar/images/top_icon.gif") no-repeat; width: 48px; height: 16px; position: fixed; right: 5px; bottom: 23px; text-indent: -9999em; font-size: 0; z-index: 999; }

Chèn vào overall_footer: yume sử dụng tới 2 js cho nút cuộn này, bạn nên bóc tách ra và gộp vào làm 1

Code:: <script type="text/javascript" src="http://static.yume.vn/notification/20120105/js/notification_bar.js"></script> <script type="text/javascript" src="http://static.yume.vn/notification/20101123//js/jquery.scrollTo-1.4.0-min.js"></script> <a href="#top" id="top-link" style="">Đầu trang</a>

#1 Các loại nút cuộn về đầu trang

#2 Di chuyển lên, xuống cho punBB

#3 Nút cuộn về đầu trang phức tạp

#4 Nút lên đầu trang vẽ bằng CSS:

#5 Re: Các loại nút cuộn về đầu trang

#6 Re: Các loại nút cuộn về đầu trang

#7 Re: Các loại nút cuộn về đầu trang

#8 Re: Các loại nút cuộn về đầu trang

#9 Re: Các loại nút cuộn về đầu trang

#10 Kiểu chinhphuc invision

#11 Lên, xuống và về giữa trang

#12 Nút cuộn trang nằm cùng thanh địa chỉ cho phpBB2 (ngang)

#13 Nút cuộn trang nằm cùng thanh địa chỉ cho phpBB2 (dọc)

#14 Re: Các loại nút cuộn về đầu trang

#15 Re: Các loại nút cuộn về đầu trang

#16 Re: Các loại nút cuộn về đầu trang