一款自适应的THML5回到顶部jquery插件

1,071次阅读
没有评论

最近在做一个企业网站,用到了这个插件,效果挺不错的,图片采用font-awesome,使用之前需要引用jquery库和font-awesome字体库。

html代码:

<a href="#" class="mk-go-top"><i class="mk-icon-chevron-up"></i></a>

样式:

.mk-go-top {

background-color: rgba(0, 0, 0, 0.2);

border-radius: 3px;

bottom: 10px;

opacity: 0;

padding: 12px 14px;

position: fixed;

right: -60px;

transition: all 0.2s ease-in-out 0s;

z-index: 100;

}

.mk-go-top.off {

opacity: 0;

right: -60px;

}

.mk-go-top.on {

opacity: 1;

right: 10px;

}

.mk-go-top:hover {

background-color: rgba(0, 0, 0, 0.4);

}

.mk-go-top i {

color: #fff;

font-size: 24px;

line-height: 24px;

}

js代码:

/* Floating Go to top Link */
/* -------------------------------------------------------------------- */
$(window).scroll(function() {
    if ($(this).scrollTop() > 700) {
        $('.mk-go-top, .mk-quick-contact-wrapper').removeClass('off').addClass('on');
    } else {
        $('.mk-go-top, .mk-quick-contact-wrapper').removeClass('on').addClass('off');
    }
});

$('.mk-go-top, .mk-back-top-link, .single-back-top a, .divider-go-top, .comments-back-top').click(function() {
    $("html, body").animate({
        scrollTop: 0
    }, 800);
    return false;
});

$('.mk-classic-comments').click(function() {
    $("html, body").animate({
        scrollTop: $('#comments').offset().top
    }, 800);

});

正文完
 

公众号