Hugo添加返回顶部按钮
返回顶部按钮虽然看上去小巧,但确实是个很方便的功能. 读者阅读完一些较长文章后能快速返回页面顶部点选其他文章.
1. 基础模板文件中添加返回顶部按钮元素
Hugo站点根目录下的基础模板文件(./layouts/_default/baseof.html)的body字段尾部添加如下代码. 如果没有该路径或者该html文件, 可以将主题目录themes下相同路径的baseof.html文件拷贝至此.
- class=“btn” 表示使用主题style.css中的.btn样式, 也可以用自己的样式
- id=“goTopBtn” 按钮的id, 便于在css文件中编写特定的样式, 或者在js文件编写方法
- onclick=“smoothScrollTop()” 点击按钮运行js文件中的smoothScrollTop方法
- title=“Go to top” 表示光标移动到按钮上时显示的tips
<body>
<button class="btn" onclick="smoothScrollTop()" id="goTopBtn" title="Go to top">TOP</button>
</body>
2. 按钮自定义样式
Hugo站点根目录下的自定义样式文件(./static/css/custom.css)中添加如下代码. 添加css和js文件的方法可以参看Hugo添加Prism代码高亮这篇文章中添加prism.css和prism.js文件的方法.
- #name 表示该样式应用于id=“name"的元素
- .name 表示该样式应用于class=“name"的元素
- position: fixed; 表示按钮在页面上的固定位置, 结合bottom和right参数可以将按钮固定在页面左下角
- z-index: 99; 表示z轴参数, 将按钮置于页面最顶层, 防止被其他元素遮盖
- cursor: pointer; 表示光标移动到按钮上部时光标指针变成小手
#goTopBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 25px; /* Place the button at the bottom of the page */
right: 25px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 10px; /* Some padding */
border-radius: 0.3em; /* Rounded corners */
font-size: 12px; /* Increase font size */
}
下面是使用class=“btn"后继承于主题中的btn样式部分代码. btn:hover表示光标移动到按钮上部时按钮变色.
/* Button */
.btn {
padding: 5px 10px;
font-weight: 700;
color: #fff;
white-space: pre-line;
background: #2a2a2a;
}
.btn:hover {
color: #fff;
background: #e64946;
}
3. 返回顶部行为方法
返回顶部的方法可以用javascript实现, 也可以用jquery实现. 下面就分开介绍下.
3.1. javascript方法
Hugo站点根目录下的自定义JavaScript文件(./static/js/custom.js)中添加如下代码. 提供了两种返回方式, 可根据喜好选择其中一种.
- scrollTop 方法是直接回顶部
- smoothScrollTop 方法是平滑回滚到顶部
- scrollTopButton 方法只有向下滚动超过20px后才会显示按钮, 其他情况按钮隐藏
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollTopButton()};
function scrollTopButton() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("goTopBtn").style.display = "block";
} else {
document.getElementById("goTopBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function scrollTop() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
//Smooth scroll to the top of the document
function smoothScrollTop(){
var timer = null;
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
3.2. jquery方法
上面的样式是根据以前主题写的, 现在更新jquery的方法就顺便记录下当前主题配套的返回按钮样式, css代码如下, 其中返回按钮元素id=“gotoTop”.
/*gotoTop button*/
#gotoTop {
position:fixed;
right:0;
opacity:.8;
visibility:hidden;
bottom:25px;
margin:0 25px 0 0;
z-index:99;
transition:.35s;
transform:scale(0);
transition:all .5s
}
#gotoTop.visible {
opacity:.8;
visibility:visible;
transform:scale(1)
}
#gotoTop.visible a:hover {
outline:none;
opacity:.9;
background:var(--accent)
}
#gotoTop a {
outline:none;
text-decoration:none;
border:0;
display:block;
width:46px;
height:46px;
background-color:#212121;
opacity:.8;
transition:all .3s;
border-radius:50%;
text-align:center;
font-size:26px
}
body #gotoTop a {
outline:none;
color:#fff
}
#gotoTop a:after {
outline:none;
content:"\f106";
font-family:fontawesome;
position:relative;
display:block;
top:50%;
-webkit-transform:translateY(-55%);
transform:translateY(-55%);
color:#ffffff
}
同以前一样, 将返回按钮添加在<footer>元素之前.
<!-- goto Top button -->
<div id="gotoTop"><a href="#"></a></div>
jquery代码部分主要是用animate方法. 按钮的显示与隐藏用visible属性实现.
/* Back to Top button behaviour */
var pxShow = 100;
var scrollSpeed = 500;
$(window).scroll(function() {
if ($(window).scrollTop() >= pxShow) {
$("#gotoTop").addClass('visible');
} else {
$("#gotoTop").removeClass('visible');
}
});
$('#gotoTop a').on('click', function() {
$('html, body').animate({
scrollTop: 0
}, scrollSpeed);
;
return false;
});
4. 更新历史
Version | Detail | Date |
---|---|---|
1.0 | 初版 | 2019-03-01 |
1.1 | 添加jquery方法 | 2019-11-02 |