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 国际许可协议」进行许可。转载时须注明出处及本声明