Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Monday, September 02, 2013

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

Chia sẻ:
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

8 nhận xét:

  1. sao e làm nó hiện nút lên mà bấm vào nó không chạy a

    ReplyDelete
    Replies
    1. Template bạn đã cài đặt jQuery chưa vậy? Nếu chưa bạn tìm thẻ đóng </head> và đặt trước nó đoạn code sau
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
      Một demo khác về thủ thuật này > http://testtemplatemoi.blogspot.com/

      Delete
    2. có jQuery rồi, mà không hiểu sao k dc nữa

      Delete
    3. nó bị xung đột jQuery đó bạn ak, hủm mình cũng bị lỗi này, mình thử xóa bớt các file jQuery trong thẻ (/body)chỉ chừa lại một cái thôi, bạn có thể kiểm tra TẠI ĐÂY

      Delete
    4. Nếu banje hiện tại của em thấp hơn của huy thì em nên xóa nó đi và dùng đoạn của Huy ý :)

      Delete
  2. Chẳng hiểu sao trang chủ của blog của mình mất hết cả thanh cuộn dọc, ngang; mình thu nhỏ cửa sổ trình duyệt lại thì lại hiển thị thanh cuộn dọc, mà blog của mình thì phải có thanh cuộn dọc thì mới load được thêm hình. Có bạn nào biết cách fix giúp mình với a. Mình cảm ơn nhiều!

    ReplyDelete
  3. mình đã làm được và hoạt động tốt, nhưng mũi tên ở dưới tạo thêm 1 khoảng trống nữa, mình muốn mũi tên ở dưới, nó nằm ở phần footer màu đen cho gọn gàng, bạn xem giúp mình với
    http://www.aomuasaigon.com/

    ReplyDelete