Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng

Được đăng bởi Unknown  |  lúc  22:18

Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu

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!

Live Demo

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

Đặc biệt lưu ý:

Nếu bạn đang gặp khó khăn với hướng dẫn của bài viết "Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng". Hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bật ra quảng cáo, nhấn Bỏ Qua Quảng Cáo)