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!

Tác giả: Khánh

Một Blogger nghiệp dư thích tìm hiểu về blogspot và các thủ thuật blog. Hy vọng từ cái nhìn của một người không chuyên có thể giúp bạn dễ dàng hơn trong con đường xây dựng Blog.

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

Tác giả: Khánh

KHI TA CHIA SẺ - HẠNH PHÚC ĐƯỢC NHÂN LÊN

CÓ THỂ BẠN MUỐN XEM