![]() |
Thêm nút "lên trên - xuống dưới" với hiệu ứng ẩn hiện chuyên nghiệp |
Thêm đoạn code sau 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:&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;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:&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;;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}
Thêm đoạn code sau trước thẻ </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>
Chỉ đơn giản vậy thôi, chúc bạn thành công!Subscribe Our Newsletter
0 Response to "Thêm nút "lên trên - xuống dưới" với hiệu ứng ẩn hiện chuyên nghiệp"
Đăng nhận xét