最近在做一个企业网站,用到了这个插件,效果挺不错的,图片采用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);
});