(소스코드 정리 - CSS 부분을 JQuery로 표현) |
(소스코드 변경) |
||
42번째 줄: | 42번째 줄: | ||
$( 'body' ).append( '<span id="to-bottom">▼아래</span>' ); | $( 'body' ).append( '<span id="to-bottom">▼아래</span>' ); | ||
var $bottomButton = $( '#to-bottom' ); | var $bottomButton = $( '#to-bottom' ); | ||
var | var wheight=window.innerHeight; | ||
var hminus= | var hminus = wheight-"100"; | ||
$bottomButton.css( { | $bottomButton.css( { | ||
'font-size' : '14pt', | 'font-size' : '14pt', |
2020년 8월 13일 (목) 23:32 판
/* [[Category:Wikipedia scripts]]
이 스크립트는 Minecraft Wiki의 Majr의 goToTop.js를
(http://minecraftwiki.net/wiki/User:Majr/goToTop.js/)
리브레 위키의 사용자 Utolee90이 재가공해서 만들었습니다.
*/
/* 위로 올라가는 버튼을 만듭니다. */
$( function() {
'use strict';
$( 'body' ).append( '<span id="to-top" >▲ 위</span>' );
var $topButton = $( '#to-top' );
$topButton.css( {
'font-size':'14pt',
'background-color':'#0077ff',
'color': '#FFF',
'position': 'fixed',
'bottom': '-30px',
'right': '56pt',
'cursor': 'pointer',
'transition': 'bottom 0.5s',
'-webkit-transition': 'bottom 0.5s',
'user-select': 'none',
'-webkit-user-select': 'none',
'-moz-user-select': 'none',
'-ms-user-select': 'none'
} ).click( function() {
$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );
} );
/* 위에서 100픽셀 이내에 있으면 위 버튼을 숨깁니다. */
$( window ).scroll( function() {
if ( $( window ).scrollTop() > 100 ) {
$topButton.css( 'bottom', '4px' );
} else {
$topButton.css( 'bottom', '-30px' );
}
} );
} );
/* 아래 버튼을 만듭니다. */
$( function() {
'use strict';
$( 'body' ).append( '<span id="to-bottom">▼아래</span>' );
var $bottomButton = $( '#to-bottom' );
var wheight=window.innerHeight;
var hminus = wheight-"100";
$bottomButton.css( {
'font-size' : '14pt',
'background-color' : '#0077ff',
'color': '#FFF',
'position': 'fixed',
'bottom': '-30px',
'right': '6pt',
'cursor': 'pointer',
'transition': 'bottom 0.5s',
'-webkit-transition': 'bottom 0.5s',
'user-select': 'none',
'-webkit-user-select': 'none',
'-moz-user-select': 'none',
'-ms-user-select': 'none'
} ).click( function() {
$( 'html, body' ).animate( { scrollTop:height}, 'slow' );
} );
/*아래에서 100픽셀 이내이면 아래 버튼을 숨깁니다. */
$( window ).scroll( function() {
if ( $( window ).scrollTop () <hminus ) {
$bottomButton.css( 'bottom', '4px' );
} else {
$bottomButton.css( 'bottom', '-30px' );
}
} );
} );