Hexo 添加返回顶部按钮
source link: https://wsgzao.github.io/post/hexo-scroll-to-top/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Hexo 已经为用户实现了清晰的模块化设计，我们只需要根据规范编写合适的 EJS 和 JS 文件放入指定目录并在所需位置进行引用即可，这里给大家分享如何为 Hexo 增加返回顶部功能。
返回顶部按钮已经成为一种习惯
2014 年 11 月 29 日 - 初稿
阅读原文 - https://wsgzao.github.io/post/hexo-scroll-to-top
- 添加 EJS 代码，新建文件
/themes/pacman/layout/_partial/totop.ejs，添加如下代码
<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
<a title="返回顶部"><img src="/imgs/scrollup.png"/></a>
</div>
- 添加 JS 代码，新建文件
/themes/pacman/source/js/totop.js，添加如下代码
如果对显示位置和回滚速度不太满意，可以修改代码中的
upperLimit和scrollSpeed参数
(function($) {
// When to show the scroll link
// higher number = scroll link appears further down the page
var upperLimit = 150;
// 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);
- 添加引用，修改
/themes/pacman/layout/_partial/after_footer.ejs，在末尾添加以下代码
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>
- 添加按钮图片，复制下图到
/themes/pacman/source/imgs目录下，文件名为scrollup.png
- 赶紧
hexo s本地刷新观察效果吧
Recommend
-
8
谈导航栏返回按钮的替代方案 呼，又要夜间上新了。其实自己偶尔还会进去关于Be For Web里面看看将近两年前写的博客开篇语。当时的动力现在仍在，当...
-
8
在实际项目开发中, 我们在进行页面跳转时, 偶尔会跳到不可返回的页面(比如退出登录后). 本篇文章就来记录下 Flutter 如何隐藏/移除导航栏的默认返回按钮. 有图有真相, 先来看下实际效果: 移除导航栏的默认返回按钮适用于:
-
8
关于如何给 NexT 主题添加友链页面，在网上能够搜到很多，但是基本上都已经过时了。 要么是没有把数据文件和主题分离，还在修改主题中的文件（而且是旧版的文件，新版的主题结构和内容都有变化）；要么是给出的代码还依赖 jQuery。 而新版的 NexT...
-
7
为博客添加返回顶部按钮 发表于 2017-02-11...
-
8
去掉 iOS 导航栏返回按钮文本三种方案 去掉 iOS 导航栏返回按钮文本三种方案 ...
-
3
经常在某些文档中或者文章中可以看到这样一个"返回顶部"的功能，具体有两个交互只有滚动一定距离才会出现，返回到顶部重新隐藏点击会返回到顶部比如
-
5
为 Hexo 主题 next 添加图片背景 发表于 2018-12-05...
-
4
返回按钮和关闭按钮，你用的对吗？ 小乞丐 2022-04-29 3 评论...
-
3
敢一行，则予知。脚踏实地，知行合一。 添加如下即可：
-
4
“日上三竿我犹眠，不理人间万里愁。” 博客优化：Tags按字母序排序 & 添加滚动到顶部按钮 又是一波博客优化 内容也比较简单，属于锦上添花 之前搞...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK