일정위치에서 상단으로 스크롤되는 스크립트

2016. 3. 15. 17:37 Web/Mobile

<p class="goTop"><a href="#">맨위로</a></p> 

 




.goTop {

  width: 42px;

  height: 42px;

  background: #5acbd7;

  border-radius: 50%;

  opacity: 0.7;

  z-index: 100;

  a {

    display: block;

    padding-top: 22px;

    padding-top: 2.2rem;

    color: #fff;

    text-align: center;

    font-size: 11px;

    background: url("../../images/mo/ico_gnb.png") no-repeat 0 0;

    background-size: 320px 400px;

    background-position: -32px -137px;

  }

}

 



<script>

$(".goTop").hide();

$('.goTop').click(function(){

$('html, body').animate({scrollTop:0}, 300);

});

$(window).scroll(function(){

var conH = $("footer").height() + 90;

temp = $(window).scrollTop();

if( temp = $(window).scrollTop() ) {

$(".goTop").fadeIn();

} else {

$(".goTop").fadeOut();

}

$(".goTop").css({"position" : "fixed" , "bottom" : conH + "px" , "right" : "5px"});

});

</script>


'Web > Mobile' 카테고리의 다른 글

일정위치에서 부드럽게 스크롤되는 toTop 플러그인  (0) 2016.03.15
[JQuery UI]버튼 UI  (0) 2013.01.25
[JQuery UI]폼 UI  (0) 2013.01.25
[JQuery UI]콘텐츠 영역 접이식 패널  (0) 2013.01.25
간편한 header, footer  (0) 2013.01.25

일정위치에서 부드럽게 스크롤되는 toTop 플러그인

2016. 3. 15. 17:16 Web/Mobile

<div id="wrapper"></div>



#toTop {

display:none;

text-decoration:none;

position:fixed;

bottom:10px;

right:10px;

overflow:hidden;

width:51px;

height:51px;

border:none;

text-indent:100%;

background:url(../img/ui.totop.png) no-repeat left top;

}


#toTopHover {

background:url(../img/ui.totop.png) no-repeat left -51px;

width:51px;

height:51px;

display:block;

overflow:hidden;

float:left;

opacity: 0;

-moz-opacity: 0;

filter:alpha(opacity=0);

}


#toTop:active, #toTop:focus {

outline:none;

}




<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="js/easing.js" type="text/javascript"></script>

<script src="js/jquery.ui.totop.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

/*

var defaults = {

  containerID: 'toTop', // fading element id

containerHoverID: 'toTopHover', // fading element hover id

scrollSpeed: 1200,

easingType: 'linear' 

  };

*/

$().UItoTop({ easingType: 'easeOutQuart' });

});

</script>

Download: http://mattvarone.com/web-design/uitotop-jquery-plugin/

'Web > Mobile' 카테고리의 다른 글

일정위치에서 상단으로 스크롤되는 스크립트  (0) 2016.03.15
[JQuery UI]버튼 UI  (0) 2013.01.25
[JQuery UI]폼 UI  (0) 2013.01.25
[JQuery UI]콘텐츠 영역 접이식 패널  (0) 2013.01.25
간편한 header, footer  (0) 2013.01.25

스크롤 영역 채워주는 모달 팝업

2014. 5. 23. 14:49 Web/Favorite script


Html 
<div class="mask"></div>

Js
 var maskHeight = jQuery(document).height();  
 var maskWidth = jQuery(window).width(); 
 jQuery('.mask').css({'width':maskWidth,'height':maskHeight+"px"});
 jQuery(".mask").show();

Css
.mask {position:absolute; top:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:888;}

[W3C 25주년]Tips and Konwhow for HTML5

2014. 5. 8. 13:33 Web/참고자료

""


출처:http://www.miraeweb.com/archives/14648

'Web > 참고자료' 카테고리의 다른 글

[W3C 25주년기념]오늘 당장 사용할 수 있는 HTML5  (0) 2014.05.08
favicon site  (0) 2012.04.12

[W3C 25주년기념]오늘 당장 사용할 수 있는 HTML5

2014. 5. 8. 13:27 Web/참고자료

'Web > 참고자료' 카테고리의 다른 글

[W3C 25주년]Tips and Konwhow for HTML5  (0) 2014.05.08
favicon site  (0) 2012.04.12
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET