typecho返回顶部JS调用方法

当你的文章字数比较多的情况下,来回滚动影响体验时,为了方便访问者的阅读使用体验,又由于前几天有网友留言问我有没有不安装插件只JS调用返回顶部的方法,于是考虑添加一个“返回顶部”按钮,这样就可以一键直达页面顶部,google搜索了一些js脚本参照了教程直接实现了JS调用。

使用方法:

在footer.php页面增加如下代码(可直接下载我的第二段JS脚本,将其中的图片地址改成你自己自定义的):

<!-- Start of Go-Top Code -->
<script type="text/javascript" src="https://inwao.com/downs/Bash/jquery.min.js"></script>
<script type="text/javascript" src="https://inwao.com/downs/Bash/go-top.js"></script>
<!-- End of Go-Top Code -->

注:jquery.min.js脚本源由于是google的,因众所周知的原因大陆是不可访问此js脚本的,为了方便大家我已经替换成本地链接。你也可以把以上两个js脚本下载到你自己的服务器里替换成你自己的,如果想更改返回顶部的图片样式,请自行打开go-top.js脚本替换img链接为你自己的图片样式链接。

当你滑动手指或者鼠标的时候是不是已经发现此网页右下角有个top小图标?点一下自动返回顶部,这个图标只在特定时刻出现,比如当你滑动鼠标或者手指的时候他就会出现,而且自带渐进动画载入效果。

此方法只在官方默认主题上测试有效,其他主题不便之处请谅解。


标签: typecho返回顶部, typecho返回顶部js脚本

已有 5 条评论

  1. 欧文斯 欧文斯   Mac OS X Mac OS X   Safari 11.0 Safari 11.0 

    实现其实很简单啊两三行搞定,主要就是要引用 jquery 体积就变大了。。

    1. Inwao Inwao 站长  Windows 7 x64 Edition Windows 7 x64 Edition   Google Chrome 65.0.3325.181 Google Chrome 65.0.3325.181 

      你有更好的?我还找了半天教程呢,如果你有的话就发到我邮箱。

      1. 欧文斯 欧文斯   Mac OS X Mac OS X   Safari 11.0 Safari 11.0 

        嘻嘻,去我博客扒

        1. inwao world inwao world 站长  Windows 7 x64 Edition Windows 7 x64 Edition   Google Chrome 65.0.3325.181 Google Chrome 65.0.3325.181 

          去你博客看了看,也没必要了,管他体积大不大,能返回就行。

          1. 欧文斯 欧文斯   Mac OS X Mac OS X   Safari 11.0 Safari 11.0 

            这倒是,能实现就可以,没必要特意追求

添加新评论