이건없지

jquery를 이용해서 스크롤을 지정한 위치까지 내리면 위로 버튼을 하단 오른쪽에 보여주고 클릭하면 화면 제일 상단으로 이동한다.

모바일웹에서도 사용할 수 있다.

예> html

<!-- 버튼 : 위로 -->
<button type="button" class="btn_up_layer">위로</button>

예> css

/* 버튼 : 위로 */
.btn_up_layer {position:absolute;top:0;right:30px;display:none;padding:5px 10px;z-index:1;}

예> javascript + jquery

/* 위로
스크롤이 특정 위치로 이동하면 위로버튼이 나타난다.
위로버튼을 클릭하면 상단으로 이동
*/
function btn_mv_up(oj) {
 if(!oj) return false;

 var st = $(window).scrollTop();
 var h = $(window).height();

 $(oj).stop().hide().css('top',h + st - 50);    // 스크롤 이동에 따른 위로버튼의 위치 이동
 if(st > 900) { $(oj).fadeIn(); }    // 위로버튼을 보여주는 위치 지정
 else if(st < 900) { $(oj).stop().fadeOut(); }    // 위로버튼을 숨기는 위치 지정

}

// 위로 버튼
 $(document).scroll(function() {
  btn_mv_up('.btn_up_layer');
 }).on('click', '.btn_up_layer', function() {
  $("html, body").animate({scrollTop:0}, 'slow');
 });

더보기>

- jquery 스크롤(scroll) 따라다니는 배너 레이어

jquery를 이용해서 스크롤을 지정한 위치까지 내리면 위로 버튼을 보여주고 클릭하면 화면 제일 상단으로 이동한다.

예> html

<!-- 버튼 : 위로 -->
<button type="button" class="btn_up_layer">위로</button>

예> css

/* 버튼 : 위로 */
.btn_up_layer {position:fixed;right:15px;bottom:20px;display:none;padding:5px 10px;z-index:1;}

예> javascript + jquery

/* 위로
스크롤이 특정 위치로 이동하면 위로버튼이 나타난다.
위로버튼을 클릭하면 상단으로 이동
*/
function btn_mv_up(oj) {
 if(!oj) return false;
 var o = $(oj);
 var p = $(window).scrollTop();
 if(p > 300){ o.fadeIn('slow'); }    // 위로버튼이 나타나는 위치 지정
 else if(p < 300){ o.fadeOut('slow'); }    // 위로버튼을 숨기는 위치 지정
}

// 위로 버튼
$(document).scroll(function() {
  btn_mv_up('.btn_up_layer');
 }).on('click', '.btn_up_layer', function() {
  $("html, body").animate({scrollTop:0}, 'slow');
});

 [스크롤이 상단에 있을 경우는 위로 버튼이 보이지 않는다.]

[스크롤을 지정 위치까지 내리면 위로 버튼이 나타난다.]

더보기>

- jquery scroll 따라다니는 위로 버튼

jquery div, table 등의 태그를 동적 생성을 하게 되면 click 이벤트 등이 반응을 하지 않게 되는데

이런 경우 on을 이용해서 처리할 수 있다.

예> html

<div class="dom">
 <ul>
  <li>http://okkks.tistory.com/1065 [기본]</li>
 </ul>
 <button type="button" class="add">추가</button>
</div>

예> javascript + jquery

<script type="text/javascript">

$('.dom .add').click(function() {
 $('.dom ul').append('<li>http://okkks.tistory.com/1065 [추가]</li>');
});

/* 기존 방식 */

/*
$('.dom ul li').click(function() {
 alert($(this).text());
});
*/

/* 동적 방식 */

$(document).on('click', '.dom li', function() {
 alert($(this).text());
});

</script>

 [기존 방식으로 하는 경우 추가된 부분은 click 이벤트가 반응을 하지 않는다.]

[동적 방식으로 처리하는 경우 추가된 부분도 click 이벤트가 발생한다.]

jquery를 이용해서 메뉴 목록에서 선택한 메뉴(탭, 버튼)를 활성화 시키고 나머지는 비활성화 시키기

<style type="text/css">
ul {list-style-type:none;max-width:200px;}
.list {border:1px solid #cccccc;padding:5px;} /* 기본 css 및 선택하지 않은 경우 */
.list.on {border:1px solid #000000;} /* 선택한 경우 css */
</style>

<ul>
 <li class="list"><a href="javascript:;">1. okkks.tistory.com</a></li>
 <li class="list on"><a href="javascript:;">2. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">3. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">4. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">5. okkks.tistory.com</a></li> 
</ul>

<script type="text/javascript">
$('li').click(function() {
 $('li').removeClass('on');
 $(this).addClass('on');
});
</script>

더보기>

- jquery를 이용한 index 값 알아내기