Hiệu ứng xuất hiện và ẩn trong vài giây

****HTML 

<div class="notify">Bạn chưa chọn loại sản phẩm.</div>

****CSS 

.notify {

    position: fixed;

    top: 20px;

    right: -340px;

    width: 300px;

    transition: all .2s;

    box-sizing: border-box;

    z-index: 99999;

    background: #fff;

    border: 1px solid #d9d9d9;

    box-shadow: 0 0 8px rgba(0,0,0,.15);

    border-radius: 16px;

    padding: 18px;

    touch-action: pan-y;

    font-size: 16px;

    color: red;

    display: block !important;

    z-index: 99999999;

}

.notify.error {

    border: 2px solid #ff3102;

    box-shadow: none;

}

.notify.is-active {

    right: 20px;

}

**** Jquery

$("#no-cart").on( "click", function() {

$(".notify").addClass("is-active");

$(".notify").addClass("error");

$('.is-active').delay(1000).fadeOut();

$(".notify").fadeOut( "slow", function() {

    $(".notify").removeClass("is-active");

$(".notify").removeClass("error");

  });

// $('.is-active').delay("fast").fadeIn();

// $('.error').delay(1000).fadeOut();

});

fadeIn - fadeOut - delay

$('.add-shipproduct').delay("fast").fadeIn();
$('.add-shipproduct').delay(1000).fadeOut();

FadeIn + FadeOut

delay script (ẩn - hiện thẻ div trong vài giây)

script:
$('.no-succes').delay("fast").fadeIn();
$('.no-success').delay(5000).fadeOut();

html:
<div class="not-succes">Phiếu đơn hàng trống</div>

delay script (ẩn - hiện thẻ div trong vài giây)

script:
$('.no-succes').delay("fast").fadeIn();
$('.no-success').delay(5000).fadeOut();

html:
<div class="not-succes">Phiếu đơn hàng trống</div>

button jquery scroll top

#### Dạng 1:

Download :tại đây

####  Dạng 2:

     <script>          
            jQuery(document).ready(function() {
                var offset = 220;
                var duration = 500;
                jQuery(window).scroll(function() {
                    if (jQuery(this).scrollTop() > offset) {
                        jQuery('.back-to-top').fadeIn(duration);
                    } else {
                        jQuery('.back-to-top').fadeOut(duration);
                    }
                });              
                jQuery('.back-to-top').click(function(event) {
                    event.preventDefault();
                    jQuery('html, body').animate({scrollTop: 0}, duration);
                    return false;
                })
         });      
    </script>

     <script>          
            jQuery(document).ready(function() {              
                var $elem = $('.content_page');              
                var offset = 80;
                var duration = 500;
                jQuery(window).scroll(function() {
                    if (jQuery(this).scrollTop() > offset) {
                        jQuery('.back-to-bottom').fadeIn(duration);
                    } else {
                        jQuery('.back-to-bottom').fadeOut(duration);
                    }
                });              
            // phan click xuong
                $('.back-to-bottom').click(function (event) {
                        $('html, body').animate({scrollTop: $elem.height()}, 800);
                    }
                );              
            });      
    </script>

####  Dạng 3:

download: tại đây

####  Dạng 4:
<base target="_self" />
<div class="header" id="header">
    a class="gotop" href="#header">top</a>
</div>

<a href="#" onclick="javascript:$('html, body').animate({ 'scrollTop': 0 }, 500); return false;" class="gotop">&nbsp;</a>


####  Dạng 5:

## Note: scroll to top
$('.scrollToTop').hide();
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').fadeIn(300);
    }
    else {
        $('.scrollToTop').fadeOut(300);
    }
});

$('.scrollToTop').click(function () {
    $('html, body').animate({scrollTop: 0}, 500);
    return false;
});

if ($('.sidebar li.cat-item').length) {
    $('.sidebar li.cat-item .cat_num .line').each(function () {
        if ($(this).is(':empty')) {
            $(this).parent().hide();
        }

    });
}

## scroll to bottom
    $('.scrollToBottom').show();
    $(window).scroll(function () {
        if ($(this).scrollTop() < ($(document).height() - 100 - $(window).height())) {
            $('.scrollToBottom').fadeIn(300);
        }
        else {
            $('.scrollToBottom').fadeOut(300);
        }
    });
    
    $('.scrollToBottom').click(function () {
        $('html, body').animate({scrollTop: $(document).height()}, 500);
        return false;

    });

## HTML
<a href="#" rel="nofollow" class="scrollToTop button" style="display: inline;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

<a href="#" rel="nofollow" class="scrollToBottom button"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>

## CSS
.scrollToBottom {background: #373C43;position: fixed;line-height: 50px;width: 50px;right: 50px;
    bottom: 51px;height: 50px;color: #f8f8f8;text-align: center;font-size: 22px;display: none;
    z-index: 1000;padding: 0!important;}
.scrollToTop {background: #373C43;position: fixed;line-height: 50px;width: 50px;right: 50px;bottom: 102px;height: 50px;color: #f8f8f8;text-align: center;font-size: 22px;display: none;
    z-index: 1000;padding: 0!important;}

.scrollToTop:hover,.scrollToBottom:hover {color: #FFA507;}

##### Dạng 6:
link web: http://vsl.vihan.net - product

$(document).ready(function(){
$(window).scroll(function () {
if($(window).scrollTop() > $('.btn-bg').offset().top || $(window).scrollTop() > $('.bg-footer').offset().top) {
$('#idbtn').css('position','fixed');
$('#idbtn').css('top','0');
$('#idbtn').css('z-index','1'); 
}else{
$('#idbtn').css('position','');
$('#idbtn').css('top','');
}      
});

});

#---------------------------------------------------#

Scroll Top JS 3 $(document).ready(function(){
$(window).scroll(function () {
if($(window).scrollTop() > $('.tab-detail-pro').offset().top || $(window).scrollTop() > $('.bg-footer').offset().top) {
$('#detail-pro').css('position','fixed');
$('#detail-pro').css('top','50px');
$('#detail-pro').css('margin-right','30px');
$('#detail-pro').css('z-index','1'); 
}else{
$('#detail-pro').css('position','');
$('#detail-pro').css('margin-right','0');
$('#detail-pro').css('top','');
}
});
});

#---------------------------------------------------------------------------------------#
Scroll Top JS 4

<div id="to-top">
        <a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
        <script>
            // ===== Scroll to Top ==== 
            $(window).scroll(function() {
                if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
                    $('#return-to-top').fadeIn(200);    // Fade in the arrow
                } else {
                    $('#return-to-top').fadeOut(200);   // Else fade out the arrow
                }
            });
            $('#return-to-top').click(function() {      // When arrow is clicked
                $('body,html').animate({
                    scrollTop : 0                       // Scroll to top of body
                }, 500);
            });
        </script>
    </div>

<style type="text/css">
    #return-to-top i {
        color: #fff;
        margin: 0;
        position: relative;
        left: 16px;
        top: 13px;
        font-size: 19px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        z-index: 0;
    }
    #return-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.7);
        width: 50px;
        height: 50px;
        display: block;
        text-decoration: none;
        -webkit-border-radius: 35px;
        -moz-border-radius: 35px;
        border-radius: 35px;
        display: none;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    #return-to-top:hover {
        background: rgba(0, 0, 0, 0.9);
    }
    #return-to-top:hover i {
        color: #fff;
        top: 5px;
    }

</style>