"미디어위키:Common.js"의 두 판 사이의 차이
디지털 트윈국토 표준 활용 가이드
16번째 줄: | 16번째 줄: | ||
}); | }); | ||
*/ | */ | ||
$( function () { | $( function () { | ||
// create go to top button | |||
let topButtonDiv = document.createElement("div"); | |||
topButtonDiv.setAttribute("id", "topButtonDiv"); | |||
let topButtonDivStyle = "width:40px; height:40px; border:solid 2px #147060; background: #019480;"; | |||
topButtonDivStyle += "position:fixed; float: bottom; bottom: 9%; right: 173px; cursor: pointer;"; | |||
topButtonDivStyle += "color: #147060; font-size: 26px; text-align: center; -webkit-user-select: none; line-height: 40px;"; | |||
topButtonDiv.setAttribute("style", topButtonDivStyle); | |||
topButtonDiv.innerHTML += '▲'; | |||
// create go to bottom button | |||
let bottomButtonDiv = document.createElement("div"); | |||
bottomButtonDiv.setAttribute("id", "bottomButtonDiv"); | |||
let bottomButtonDivStyle = "width:40px; height:40px; border:solid 2px #147060; background: #019480;"; | |||
bottomButtonDivStyle += "position:fixed; float: bottom; bottom: 9%; right: 130px; cursor: pointer;"; | |||
bottomButtonDivStyle += "color: #147060; font-size: 26px; text-align: center; -webkit-user-select: none; line-height: 40px;"; | |||
bottomButtonDiv.setAttribute("style", bottomButtonDivStyle); | |||
bottomButtonDiv.innerHTML += '▼'; | |||
// add element | |||
let parentDiv = document.getElementById("mw-related-navigation"); | |||
parentDiv.appendChild(topButtonDiv); | |||
parentDiv.appendChild(bottomButtonDiv); | |||
// add go to top function | |||
topButtonDiv.addEventListener('click', function() { | |||
window.scrollTo({ top: 0, behavior: 'smooth' }); | |||
}, false); | |||
// add go to bottom function | |||
bottomButtonDiv.addEventListener('click', function() { | |||
window.scrollTo({ top: $(document).height(), behavior: 'smooth' }); | |||
}, false); | |||
}); | }); |
2022년 3월 11일 (금) 22:22 판
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
/*
* Back to top function not working
$( function () {
var elems = document.getElementsByClassName('editsection'); // *** NOTE: ClassName may need to be 'mw-editsection' instead
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);
}
});
*/
$( function () {
// create go to top button
let topButtonDiv = document.createElement("div");
topButtonDiv.setAttribute("id", "topButtonDiv");
let topButtonDivStyle = "width:40px; height:40px; border:solid 2px #147060; background: #019480;";
topButtonDivStyle += "position:fixed; float: bottom; bottom: 9%; right: 173px; cursor: pointer;";
topButtonDivStyle += "color: #147060; font-size: 26px; text-align: center; -webkit-user-select: none; line-height: 40px;";
topButtonDiv.setAttribute("style", topButtonDivStyle);
topButtonDiv.innerHTML += '▲';
// create go to bottom button
let bottomButtonDiv = document.createElement("div");
bottomButtonDiv.setAttribute("id", "bottomButtonDiv");
let bottomButtonDivStyle = "width:40px; height:40px; border:solid 2px #147060; background: #019480;";
bottomButtonDivStyle += "position:fixed; float: bottom; bottom: 9%; right: 130px; cursor: pointer;";
bottomButtonDivStyle += "color: #147060; font-size: 26px; text-align: center; -webkit-user-select: none; line-height: 40px;";
bottomButtonDiv.setAttribute("style", bottomButtonDivStyle);
bottomButtonDiv.innerHTML += '▼';
// add element
let parentDiv = document.getElementById("mw-related-navigation");
parentDiv.appendChild(topButtonDiv);
parentDiv.appendChild(bottomButtonDiv);
// add go to top function
topButtonDiv.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}, false);
// add go to bottom function
bottomButtonDiv.addEventListener('click', function() {
window.scrollTo({ top: $(document).height(), behavior: 'smooth' });
}, false);
});