Bài viết này mình sẽ hướng dẫn bạn làm cách nào để thêm 2 button Lên trên và Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng nhờ sử dụng Javascript. Và các button mình không sử dụng hình ảnh như các thủ thuật trước mà thay vào đó các button sẽ được tạo từ CSS. Nếu bạn có hứng thú với tiện ích thú vị này hãy làm theo các bước hướng dẫn đơn giản bên dưới!
Thêm CSS
Bạn hãy thêm đoạn code bên dưới vào trước thẻ ]]></b:skin>#gotop{cursor:pointer;width:30px;height:30px;position:fixed !important;position:absolute;z-index:999;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0;border-radius:10px 0 0 0;overflow:hidden} #gotop:hover:after{border-bottom-color:white} #gotop:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:transparent transparent #C3D1D7 transparent;position:absolute;top:0;left:11px} #gobottom{cursor:pointer;width:30px;height:30px;position:fixed!important;position:absolute;top:26px;right:0;z-index:99;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:0 0 0 10px;-moz-border-radius:0 0 0 10px;border-radius:0 0 0 10px;overflow:hidden} #gobottom:hover:after{border-top-color:white} #gobottom:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:#C3D1D7 transparent transparent transparent;position:absolute;top:10px;left:11px}
Javascript
Thêm code sau vào trước thẻ đóng </body><script type='text/javascript'> //<![CDATA[ $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#gotop").removeAttr("href"); $("#gotop").stop().animate({ bottom: "0", right: "0" }, { duration: 800, queue: false }) } else { $("#gotop").stop().animate({ bottom: "-50", right: "-50" }, { duration: 1000, queue: false }) } if ($(this).scrollTop() > 100) { $("#gobottom").removeAttr("href"); $("#gobottom").stop().animate({ top: "-50", right: "-50" }, { duration: 800, queue: false }) } else { $("#gobottom").stop().animate({ top: "0", right: "0" }, { duration: 1000, queue: false }) } }); $(function () { $("#gotop").click(function () { $("html, body").animate({ scrollTop: 0 }, "slow"); return false }) $("#gobottom").click(function () { $("html, body").animate({ scrollTop: $('#footer').offset().top }, 970); return false }) }); //]]> </script> <a id="gotop" style="bottom: -50px; right: -50px;">Lên Trên!</a> <a id="gobottom" style="top: 0px; right: 0px;">Xuống Dưới!</a> <div id='footer'/>
Chúc blog bạn ngày càng đẹp và phát triển! Nếu có thời gian mời bạn ghé thăm blog cá nhân của mình tại địa chỉ TrollVL.Com
Nguồn TrollVL.Com
Nhận xét
sao e làm nó hiện nút lên mà bấm vào nó không chạy a
Trả lờiXóaTemplate bạn đã cài đặt jQuery chưa vậy? Nếu chưa bạn tìm thẻ đóng </head> và đặt trước nó đoạn code sau
Xóa<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Một demo khác về thủ thuật này > http://testtemplatemoi.blogspot.com/
có jQuery rồi, mà không hiểu sao k dc nữa
Xóanó bị xung đột jQuery đó bạn ak, hủm mình cũng bị lỗi này, mình thử xóa bớt các file jQuery trong thẻ (/body)chỉ chừa lại một cái thôi, bạn có thể kiểm tra TẠI ĐÂY
XóaNếu banje hiện tại của em thấp hơn của huy thì em nên xóa nó đi và dùng đoạn của Huy ý :)
XóaThành công rồi. Cảm ơn pro
Trả lờiXóaChẳng hiểu sao trang chủ của blog của mình mất hết cả thanh cuộn dọc, ngang; mình thu nhỏ cửa sổ trình duyệt lại thì lại hiển thị thanh cuộn dọc, mà blog của mình thì phải có thanh cuộn dọc thì mới load được thêm hình. Có bạn nào biết cách fix giúp mình với a. Mình cảm ơn nhiều!
Trả lờiXóamình đã làm được và hoạt động tốt, nhưng mũi tên ở dưới tạo thêm 1 khoảng trống nữa, mình muốn mũi tên ở dưới, nó nằm ở phần footer màu đen cho gọn gàng, bạn xem giúp mình với
Trả lờiXóahttp://www.aomuasaigon.com/