JQuery [floatMenu,decoration]스크롤을 따라 움직이는 플로팅 메뉴

스크롤을 따라움직이는 플로팅 메뉴 만들기

도움 주신분들

• 백전백승님  부드럽게 이동하는 jquery


• 웹눈님   jQuery 강좌3. 스크롤바 따라다니는 슬라이드 메뉴

jquery나 tistory 블로깅 기법을 배우실분은 위 링크를 클릭하십시오

모든 게시글 오른쪽 마우스 열어 놓았읍니다만

드레그해서 가져가면 남는것 아무것도 없읍니다

수동으로 코딩 하십시오

마크업 -

<!--플로팅 메뉴 마크업 </body> 바로위에 입력한다 -->

<div id="floatMenu">

<a href="header" id="top1" title="▲위로가기">

<div id="page_up"></div>

</a>

<a href="http://booolean.tistory.com/" id="home1" title="처음으로">

<div id="home"></div>

</a>

<a href="footer" id="bottom1" title="▼아래로가기">

<div id="page_down"></div>

</a>

</div>

CSS -

/* 플로팅 메뉴 스타일*/  

a:link    {text-decoration:none; color:#333;}

  a:hover {text-decoration:none; color:#999;}

  a:active    {text-decoration:none; color:#FF0033;}

  a:visited   {text-decoration:none; color:#333;}

  #floatMenu{

      position:absolute;

      width:31px;

      left:50%;

      padding:0;

      margin:0;

      z-index:1000;

      text-align:center;

      top:400px;

      margin-left:-606px; /*아이콘 위치 조절 */

  }

  #page_up {

width: 31px;

height: 31px;

background: url(http://cfs.tistory.com/custom/blog/156/1560470/skin/images/up.png);

cursor: hand;

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter …\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

-webkit-filter: grayscale(0%);

}

  #home {

width: 31px;

height: 31px;

background: url(http://cfs.tistory.com/custom/blog/156/1560470/skin/images/home.png);

/*스킨적용시 ./images/home.png  */

cursor: hand;

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter …\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

-webkit-filter: grayscale(0%);

}

  #page_down {

width: 31px;

height: 31px;

background: url(http://cfs.tistory.com/custom/blog/156/1560470/skin/images/down.png);

cursor: hand;

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter …\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

-webkit-filter: grayscale(0%);

}

JQUERY -

//플로팅 메뉴 쿼리문 대소문자 점(.) 대괄호 중괄호 주의

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var currentPosition = parseInt($("#floatMenu").css("top"));

$(window).scroll(function() {

var position = $(window).scrollTop();

$("#floatMenu").stop().animate({"top":position+currentPosition+"px"},1000);

});

});

</script>

<script type="text/javascript">

$(document).ready(function(){

$('#top1,#top2,#top3,#bottom1,#c_w1,#category1,#g_w1').click(function(){

var id = $(this).attr("href");

var offset = 60;

var target = $(id).offset().top - offset;

$('html,body').animate({scrollTop:target},500);

event.preventDefault();

});

});

</script>