Sheng Wang

Hexo博客添加返回顶部按钮

为博客添加一个返回顶部的按钮,简单而又实用。

添加HTML代码

为网页添加返回顶部的代码,在主题目录下新建source/_partial/totop.ejs,写入内容

1
2
3
<div id="totop" style="position:fixed;bottom:150px;right:20px;cursor: pointer;">
<a title="Back to top"><img src="/imgs/scrollup_arrow.png"/></a>
</div>

其中,选择自己满意的图片src="/imgs/scrollup_arrow.png"设置按钮,以及与网页相衬的style

添加JS代码

为我们的返回顶部按钮添加JS代码。在主题目录下新建文件source/js/totop.js,写入内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(function($) {
// When to show the scroll link
// higher number = scroll link appears further down the page
var upperLimit = 1000;
// Our scroll link element
var scrollElem = $('#totop');
// Scroll to top speed
var scrollSpeed = 500;
// Show and hide the scroll to top link based on scroll position
scrollElem.hide();
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
if ( scrollTop > upperLimit ) {
$(scrollElem).stop().fadeTo(300, 1); // fade back in
}else{
$(scrollElem).stop().fadeTo(300, 0); // fade out
}
});

// Scroll to top animation on click
$(scrollElem).click(function(){
$('html, body').animate({scrollTop:0}, scrollSpeed); return false;
});
})(jQuery);

添加对以上代码的引用

打开主题目录下的文件/layout/_partial/after_footer.ejs,在文件末尾添加以下内容

1
2
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>

完成!