إنشاء زر للأعلى وللأسفل مع الاختفاء لمدونات بلوجر

#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}

<div style=’clear:both;’/>  <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’/>