[建站教程]为你的博客做一个GoTop(返回顶部)按钮+动画,利用Anime.js

GoTop(返回顶部)

在写一些很长很长的文章或者页面,分类较多,并且以图文形式展示......的时候。读者们就需要一个目录树和返回顶部按钮来增强用户体验。但是网上找的插件做出来的gotop按钮动画性能不太理想。想着就自己做一个GoTop按钮,然后按钮加点小动画。

当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高。

关于预览

页面向下拉,看看右下角。嗯!就是那个圆圈。

关于Anime.js

Anime.js 是一个轻量级JavaScript动画库,具有简单但功能强大的API。
它适用于CSS属性,SVG,DOM属性和JavaScript对象。
Anime.js在 上有超过30K的Star。

重要说明

以下代码依赖JQuery.
如果你的网站没有加载JQuery,可以自行替换代码,使用原生JavaScript来写。
Anime.js不需要依赖。
下面代码为了减少页面加载大小经过压缩,如果你需要更改内容可自行格式化。

插入自定义css

.back_to_top{cursor:pointer;position:fixed;z-index:100;opacity:0;right:7%;bottom:150px;width:15px;height:15px}
.goTop_circle{position:fixed;color:#366EBB}
#goToTop{display:none}

在以上代码中color:#366EBB可以替换自己喜欢的颜色。

插入自定义HTML

@media (max-width:768px) {.back_to_top {display:none!important}#goToTop{display:block!important}}

关于Handsome主题

复制自定义css -> 粘帖到开发者选项--自定义css
复制自定义HTML -> 粘帖到开发者选项-->输出body尾部HTML
Handsome主题自带JQuery,不需要修改代码即可使用。

Last modification:November 9th, 2019 at 09:12 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment