Emlog返回顶部代码

汇聚分享 网络杂苑>Emlog CMS 2015-9-15 21:55 3135字 1942 4 字号: | |

返回顶部代码,效果如下图

ja-gotop-1.jpg

自带:“返回顶部”、“ 底部”、“ 跳转评论”

代码部分,分为 JS 与 CSS
下为JS 部分

 $(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';
}

将以下代码插入FOOT.PHP!
.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';
}
最后还要记得添加字体图标文件,简单的方法就是直接保存本里使用的字体文件以及 CSS,如想自定义其他 图标可去 https://icomoon.io/app/
@简爱个人博客(http://www.gouji.org


本文链接:http://www.aswait.com/emlog/505.html 百度未收录
版权申明:文章如未标注转载均为本站原创,转载请注明出处"张凯博客"。

评论

  1. 邵先森博客Google Chrome 38.0.2125.102 Linux 山东省 移动 2018-03-27 12:35 回复

    有错误吧

    1. 张凯 2018-03-31 23:10 回复

      @邵先森博客:没有错误,以前用了,现在没有在用而已。

  2. 邵先森博客Google Chrome 38.0.2125.102 Linux 山东省 移动 2018-03-27 12:33 回复

    你也没用上这个吧?代码有错误

  3. 张凯 江苏省盐城市 电信 2015-09-28 22:45 回复

    一直在用简爱的代码,自己想本地化,一直失败,真是可惜。算了吧!
    2015-09-28 22:41:50

发表评论

电子邮件地址不会被公开。必填项已用*标注

Ɣ回顶部
00:00 / 00:00
顺序播放