스크롤 탑 버튼
스크롤이 일정 높이 이하로 내려가면 버튼이 나타나고 다시 올라가면 사라집니다.
버튼을 클릭하여 화면 상단으로 이동시 부드럽게 스르륵 올라갑니다.
압축을 풀어 js/ 디렉토리에 업로드 한 후 tail.php 에 아래 코드 삽입하면 됩니다.
<script type="text/javascript" src="<?=$g4[path]?>/js/mw.scroll.top.js"></script>
버튼이 사이트 외곽에 붙어있기를 원한다면
사이트 외곽을 <div id="container"> </div> 로 감싸주면 됩니다.
[code]
var mw_scroll_top =
{
// 시작 위치
start_line: 100,
// 스크롤 속도
scroll_duration: 500,
// 하단 여백
bottom_margin: 180,
container: '#container',
top_button: 'top-button',
top_button_move: function() {
$('body').animate({scrollTop:0}, mw_scroll_top.scroll_duration);
},
top_button_control: function() {
if ($(window).scrollTop() > mw_scroll_top.start_line) {
$('#'+mw_scroll_top.top_button).fadeIn('slow');
} else {
$('#'+mw_scroll_top.top_button).fadeOut('slow');
}
var t = $(window).scrollTop() + $(window).height() - $('#'+mw_scroll_top.top_button).outerHeight() - 10;
var m = $(mw_scroll_top.container).width() ? $(mw_scroll_top.container).outerHeight() - mw_scroll_top.bottom_margin : t;
if (t >= m) t = m;
var l = $(mw_scroll_top.container).width() ? $(mw_scroll_top.container).offset().left + $(mw_scroll_top.container).outerWidth() + 10
: $(window).width() - $('#'+mw_scroll_top.top_button).outerWidth() - 10;
$('#'+mw_scroll_top.top_button).css('top', t).css('left', l);
},
run: function() {
$(document).ready(function () {
top_button = $('<div id="'+mw_scroll_top.top_button+'"><img src="'+g4_path+'/js/top.png"></div>')
.css('position','absolute')
.css('cursor', 'pointer')
.css('display', 'none')
.click(function () { mw_scroll_top.top_button_move() } )
.appendTo('body');
$(window).bind('scroll resize', function (e) { mw_scroll_top.top_button_control() } );
});
}
}
mw_scroll_top.run();
[/code]
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
스크롤이 일정 높이 이하로 내려가면 버튼이 나타나고 다시 올라가면 사라집니다.
버튼을 클릭하여 화면 상단으로 이동시 부드럽게 스르륵 올라갑니다.
압축을 풀어 js/ 디렉토리에 업로드 한 후 tail.php 에 아래 코드 삽입하면 됩니다.
<script type="text/javascript" src="<?=$g4[path]?>/js/mw.scroll.top.js"></script>
버튼이 사이트 외곽에 붙어있기를 원한다면
사이트 외곽을 <div id="container"> </div> 로 감싸주면 됩니다.
[code]
var mw_scroll_top =
{
// 시작 위치
start_line: 100,
// 스크롤 속도
scroll_duration: 500,
// 하단 여백
bottom_margin: 180,
container: '#container',
top_button: 'top-button',
top_button_move: function() {
$('body').animate({scrollTop:0}, mw_scroll_top.scroll_duration);
},
top_button_control: function() {
if ($(window).scrollTop() > mw_scroll_top.start_line) {
$('#'+mw_scroll_top.top_button).fadeIn('slow');
} else {
$('#'+mw_scroll_top.top_button).fadeOut('slow');
}
var t = $(window).scrollTop() + $(window).height() - $('#'+mw_scroll_top.top_button).outerHeight() - 10;
var m = $(mw_scroll_top.container).width() ? $(mw_scroll_top.container).outerHeight() - mw_scroll_top.bottom_margin : t;
if (t >= m) t = m;
var l = $(mw_scroll_top.container).width() ? $(mw_scroll_top.container).offset().left + $(mw_scroll_top.container).outerWidth() + 10
: $(window).width() - $('#'+mw_scroll_top.top_button).outerWidth() - 10;
$('#'+mw_scroll_top.top_button).css('top', t).css('left', l);
},
run: function() {
$(document).ready(function () {
top_button = $('<div id="'+mw_scroll_top.top_button+'"><img src="'+g4_path+'/js/top.png"></div>')
.css('position','absolute')
.css('cursor', 'pointer')
.css('display', 'none')
.click(function () { mw_scroll_top.top_button_move() } )
.appendTo('body');
$(window).bind('scroll resize', function (e) { mw_scroll_top.top_button_control() } );
});
}
}
mw_scroll_top.run();
[/code]
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0