간혹 긴 글을 적다 보면 원하는 글 내부의 원하는 곳으로 가고 싶은 경우가 생깁니다. 그러나 내용물의 링크는 글의 최상단에 위치하기 때문에 최상단으로 스크롤링을 해야 하는 불편함이 있습니다.
확장으로 SectionLinkToTop이 있으나 현재의 안정판에서는 동작을 하지 않는 것으로 보입니다. 해당 확장의 talk 내용 중에 이것을 간단히 해결하는 스크립트가 있습니다.
첫 번째 방법
내용물 제목 옆에 나오는 [edit]앞 쪽에 [back to top]이라는 연결이 새로 생깁니다. 미디어위키 전체 MediaWiki:Common.js에 적용하던지 User:Common.js에 다음을 기록합니다.
addOnloadHook(function() {
var elems = document.getElementsByClassName('mw-editsection');
for (i = 0; i < elems.length; i++) {
var span = document.createElement('span');
var link = document.createElement('a');
link.href = '#top';
link.appendChild(document.createTextNode('back to top'));
span.appendChild(document.createTextNode('['));
span.appendChild(link);
span.appendChild(document.createTextNode('] '));
elems[i].insertBefore(span, elems[i].firstChild);
}
});
두 번째 방법
지면이 최상위에 맞춰져 있을 때에는 동작하지 않고, 최상위에서 내려가면 아래쪽의 오른쪽에 새로운 버튼이 생깁니다. 버튼을 누르면 최상단으로 올려갑니다.
시스템 전체의 파일 MediaWiki:Common.css 또는 스킨 파일의 css 파일, 예를 들어, Vector 스킨일 때, MediaWiki:Vector.css에 다음 내용을 적습니다.
#toTop
{
z-index:1030;
width: 100px;
border: 2px solid #f7f7f7;
background: #f7f7f7;
text-align: center;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
color: #333;
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 20px;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
padding: 5px;
}
#toTop:hover
{
background: #b3b3b3;
border: 2px solid #b3b3b3;
}
또한, MediaWiki:Common.js 또는 User:Common.js에 다음 내용을 적습니다.
$(document).ready(function(){
$('body').append('<div id="toTop"><i class="fa fa-angle-double-up fa-5x"></i></div>');
$('#toTop').on('click', function(){
$(window).scrollTop(0);
$(this).fadeOut();
});
$(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
});
여기서 사용된 아이콘을 바꾸고 싶은 분들은 Font Awesome Icons를 먼저 설치해야 합니다. 이전에 사용하던 Tyrian 테마에서는 자동으로 Awesome 아이콘을 불러올 수 있기 때문에, 이 소스 코드는 문제가 없었습니다. 테마를 Vector로 바꾸면, MediaWiki:Common.js에서 이미지 불러오는 부분을 수정해야 합니다. 또는 코드를 수정할 필요 없이 MediaWiki:Common.css 파일에 다음을 추가합니다.
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
$(document).ready(function(){
$('body').append('<div><img id="toTop" src="http://dawoum.duckdns.org/w/images/chevron-circle-up-solid.svg"></div>');
$('#toTop').on('click', function(){
$(window).scrollTop(0);
$(this).fadeOut();
});
$(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
});세 번째 방법
Extension:Gadgets으로 구현할 수 있습니다.
MediaWiki:Gadgets-definition에서, 해당 부분은 MediaWiki:Gadgets-definition#appearance에 있는 scrollUpButton이며, 이 부분을 먼저 해당 파일에 추가해야 합니다.
그런-다음, 아래의 자바스크립트 파일을 만들어야 합니다.
선택적으로, Special:Preferences#mw-prefsection-gadgets에서 해당 가젯의 설명을 추가하기 위해 MediaWiki:Gadget-scrollUpButton을 만들 수 있습니다.