Thêm nút "lên trên - xuống dưới" với hiệu ứng ẩn hiện chuyên nghiệp

Nút lên trên, xuống dưới giúp bạn đọc blog của bạn có thể di chuyển trên blog một cách nhanh nhất, cách làm cũng khá đưn giản. Bạn thực hiện theo các bước sau.

DEMO

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;amp;quot;&amp;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;amp;quot;&amp;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!