一直就想给博客添加个类似新浪微博一侧的回到底部按键,奈何自己不懂很多网站代码设计的东西。直到前天mg12的博客发了篇新博文(jQuery 跟随浏览器窗口的回到底部按键)介绍了添加方式跟脚本以后才动手弄了个,具体演示可以看我的博客右下方。

  参数描述:

  1.下载所需文件

  下载一个Go Top功能脚本typecho回到顶部,点击下载(Go Top+滚动疗效) ,或者参考我博客的js文件 //gotop 和 //滚动疗效 部分,可直接复制使用。

  2.插入 JavaScript 和添加执行脚本

  将下载的JS文件放置至自己的网站上,在页面顶部之前加入代码typecho回到顶部,例子如下:

  

     
    
    /* < ![CDATA[ */
    (new GoTop()).init({
        pageWidth        :980,
        nodeId            :'go-top',
        nodeWidth        :50,
        distanceToBottom    :125,
        hideRegionHeight    :130,
        text            :'Top'
    });
    /* ]]> */

  3.修改网站式样文件

  加入回到底部按键对应的款式, 假设回到底部按键 ID 设置为 go-top, 那么可以添加代码如下:

   a#go-top{background:#F9F9F9;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:#999;}

  可以自行更改css样式,但 width 请与脚本参数中的 nodeWidth 保持一致。

  其实就很简单的添加一段代码跟上传一个js文件,大家按着教程来做都可以做好的,适合任何网站添加哦。

最后修改:2020 年 12 月 15 日 09 : 47 PM
如果觉得我的文章对你有用,请随意赞赏