EMLOG返回顶部代码

代码实现起来也不复杂,就是没测试过兼容怎么样,效果如下



自带,返回顶部,底部,跳转评论

默认的【评论】容器为 #comments 如果不是请修改主题或者本文的JS代码即可

代码部分 分为 JS 与 CSS

先说 JS 部分:

/**
 * 返回顶部 底部 转至评论
 * 20140615 asilu.com
**/
 
$(function(){
var ja_gotop, ja_gobottom, ja_comment,
comment = '#comments',
$body = $("html,body"),
face_list = [
'sad', 'neutral', 'wondering', 'smile', 'wink', 'happy', 'grin', 'cool', 'shocked', 'sleepy', 'evil'
];
 
$('body').append('\
<div class="ja-gotop" title="返回顶部"><span class="icon-arrow-up2"></span></div>\
<div class="ja-gocomment" title="滚动至评论"><span></span></div>\
<div class="ja-gobottom" title="返回底部"><span class="icon-arrow-down2"></span></div>');
ja_comment = $('.ja-gocomment');
 
ja_comment.click(function(){
if($(comment).length) $body.animate({
scrollTop: $(comment).offset().top
},
500);
});
 
ja_gobottom = $('.ja-gobottom')
.click(function(){
$body.animate({
scrollTop: $(document).height() - $(window).height()
},
500);
});
 
ja_gotop = $('.ja-gotop')
.click(function(){
$body.animate({
scrollTop: 0
},
500);
});
 
ja_scroll(window);
$(window).scroll(function() {
ja_scroll(this);
});
 
function ja_scroll(th){
var pct = $(th).scrollTop() / ($(document).height() - $(window).height()) * 100;
pct = parseInt(pct / 10);
$('> span', ja_comment).attr('class', 'icon-'+ face_list[pct]);
 
($(document).height() - $(window).height() - $(th).scrollTop() > 200)
? ja_gobottom.css('right', '10px')
: ja_gobottom.css('right', '-40px');
 
($(th).scrollTop() > 200)
? ja_gotop.css('right', '10px')
: ja_gotop.css('right', '-40px');
}
});

紧接着 CSS:

.ja-gotop,
.ja-gocomment,
.ja-gobottom {
position: fixed;
padding: 0;
margin: 0;
right: -40px;
text-align: center;
line-height: 42px;
height: 38px;
width: 38px;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow: 0 0 5px #000;
 
 
font-size: 26px;
-webkit-transition :all .5s;
transition :all .5s;
 
filter: alpha(opacity=50);
-moz-opacity:0.8;
opacity: 0.8;
}
 
.ja-gotop:hover,
.ja-gocomment:hover,
.ja-gobottom:hover {
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
 
.ja-gotop {
bottom: 115px;
}
.ja-gocomment {
bottom: 70px;
right: 10px;
}
.ja-gobottom {
bottom: 25px;
}
 
.ja-gocomment:hover span:before {
content: '\e96b';
}

下面还是 贴一个 预览页面吧

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>风骚的返回顶部</title>
<script src="http://api.asilu.com/cdn/jquery-1.9.1.min.js,ja.gotop-1.js,ja.gotop-1.css,ja.face.css" type="text/javascript"></script>
</head>
<body style="height: 9999px;background:#36A803;">
 
<div id="comments" style="margin-top:2000px;"><h3>默认评论容器为 <strong style="color:#f00;">#comments</strong></h3></div>
</body>
</html>

最后还要记得添加 字体图标文件,简单的方法就是直接保存本里使用的 字体文件 以及 CSS 如想自定义其他 图标可去 https://icomoon.io/app/

上一篇:EMLOG多彩加载条插件/顶部显示加载进度

下一篇:EMLOG添加文章日志内容分页功能代码

复制或转载请以超链接形式,注明转自 粤语电影-粤语电视连续剧-TVB综艺节目-粤语演唱会动画片下载
加群获取更多精品资源50238815,原文地址《EMLOG返回顶部代码

相关推荐

发表评论

路人甲

网友评论(0)