墨轩
[建站教程]为你的博客做一个GoTop(返回顶部)按钮+动画,利用Anime.js
GoTop(返回顶部)
在写一些很长很长的文章或者页面,分类较多,并且以图文形式展示......的时候。读者们就需要一个目录树和返回顶部按钮来增强用户体验。但是网上找的插件做出来的gotop按钮动画性能不太理想。想着就自己做一个GoTop按钮,然后按钮加点小动画。
当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高。
关于预览
页面向下拉,看看右下角。嗯!就是那个圆圈。
关于Anime.js
Anime.js 是一个轻量级JavaScript动画库,具有简单但功能强大的API。
它适用于CSS属性,SVG,DOM属性和JavaScript对象。
Anime.js在 [button color="success" icon="" url="https://github.com/juliangarnier/anime" type="round"]Github[/button] 上有超过30K的Star。
重要说明
[scode type="red"]以下代码依赖JQuery.
如果你的网站没有加载JQuery,可以自行替换代码,使用原生JavaScript来写。
Anime.js不需要依赖。
下面代码为了减少页面加载大小经过压缩,如果你需要更改内容可自行格式化。[/scode]
插入自定义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,不需要修改代码即可使用。
版权属于:赵墨轩部落格
本文链接:https://www.zmxcn.cn/24.html
本文章采用「知识共享署名-相同方式共享 4.0 国际许可协议」进行许可。转载时须注明出处及本声明