Top

小吴原创-Martial X实现返回顶部


今天带给大家的是Martial X主题返回顶部按钮的实现,在看博客的朋友们早就注意到了右下方有一个返回顶部的小按钮,那么接下来就看看它的实现方法吧。

添加CSS代码

在Martial X主题文件夹的source\less文件夹下,找到_base.less文件,用编辑器打开,在代码最下方回车几下,粘贴以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*返回顶部按钮样式*/

@charset "utf-8";
.cd-top {
display: inline-block;
border-radius:10px;
position: fixed;
height: 50px;
width: 50px;
bottom: 90px;
right: 20px;
box-shadow: 0 0 10px rgba(0, 176, 159, 10);
z-index:9999;

/* 按钮图标样式 */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(0, 176, 159, 5) url(/img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
}

.cd-top:hover{
/*鼠标指向按钮时显示的颜色*/
background-color: #009788;
}

.cd-top.cd-is-visible {
visibility: visible;
opacity: 0.8;
}
.cd-top.cd-fade-out {
/* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */
opacity: 0.8;
}
.no-touch .cd-top:hover {
background-color: #00B09F;
opacity: 0.8;
}
/*//手机端显示的右侧和下侧边距*/
@media only screen and (min-width: 768px) {
.cd-top {
right: 30px;
bottom: 40px;
}
}
/*//电脑端显示的右侧和下侧边距*/
@media only screen and (min-width: 1024px) {
.cd-top {
border-radius:10px;
height: 60px;
width: 60px;
right: 50px;
bottom: 50px;
}
}

注意可设置的参数,可以自定义颜色、边距等。

添加按钮图标

也就是按钮中那个白色的icon,它是一个svg图片,点此链接下载:https://www.lanzous.com/i2ebbud
下载下来的svg文件放到博客根目录的source\img文件夹中即可。

添加js代码

打开博客根文件夹下的source文件夹,进入js文件夹,没有就创建一个。,然后再创建一个名为back.top.js的文件,打开后粘贴以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function($){
var offset = 300,
scroll_top_duration = 700,
$back_to_top = $('.cd-top');
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
});
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});

在Martial X主题文件夹的layout\_partial文件夹下,找到scripts.ejs文件,用编辑器打开,添加如下代码:

1
<script src="/js/back.top.js"></script>

添加绑定div元素

打开主题文件夹中的layout文件夹下的layout.ejs文件,在<body class="l_body">后回车,添加如下代码:

1
2
3
<div classdivclass="d_out" onmouseover="this.className='d_over'"  onmouseout="this.className='d_out'">
<a title="飞回顶部" href="#0" class="cd-top">Top</a>
</div>

最后再生成预览下,返回顶部按钮也就完美实现啦!



未经允许不得转载: 小吴博客 » 小吴原创-Martial X实现返回顶部