Mediawiki是维基百科系统所采用的框架，适合于需要快速搭建知识分享的场合。采用Mediawiki生成的知识共享平台和维基百科的操作与使用类似，都支持采用Markdown语法来编辑。在有些时候，某些词条的内容很长，使得浏览器出现了滚动条，如果能仿照微博等网站添加一个回到顶部的功能，将会给我们的使用带来很大的便利，本文介绍一种实现方法：

  • 以 Mediawiki 管理员身份登录mediawiki,在搜索栏输入MediaWiki:Common.js,然后输入如下代码并保存：

    1
2
3
4
5
6
7
8

    /* 此处的JavaScript将加载于所有用户每一个页面。 */
$(window).scroll(function(){
   if($(window).scrollTop()>100){
    $(".back-to-top").fadeIn(1000);
  }else{
    $(".back-to-top").fadeOut(1000);
  }
});

  • 在mediawiki\skins\Vector.php中的第252行添加如下代码：

    1
2
3

      <div class="back-to-top" onClick="$('html,body').animate({scrollTop:0},500);">
     <span>返回顶部</span>
  </div>

  • 在mediawiki\skins\vector\screen.css的最后添加如下代码：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    .back-to-top {
    position: fixed;
    bottom: 6em;
    right: 3em;
    background-color: rgba(46, 46, 46, 0.8);
    text-align: center;
    padding: 5px 6px;
    color: #eee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    display: none;
}

.back-to-top:hover {
    background: rgba(0, 221, 255, 0.8);
}

  • 当页面的高度超出限制时，就会出现“返回顶部”的悬浮框，效果图如下：

    Back to top.PNG