[JS 활용] 제이쿼리, 상단으로 자연스럽게 가는 버튼만들기, scrollTop, fadeIn, fadeOut

 

 

 
클릭시 최상단으로 자연스럽게 올라가게 해주는 제이쿼리 소스 
사이트 내용이 길 경우 가급적 추가해 주면 좋은 요소 
 
 
 
 
 

결과 화면 

*스크롤 해보세요
 

 
 
1. 처음엔 안보여짐
2. 스크롤을 일정부분 내리면 보여지게함
3. 상단으로 자연스럽게 이동
4. 상단에서 다시 안보여지게 함 
 
 
 
 

html 

<div>
  <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
</div>
<div>
  <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
</div>
<div>
  <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>
  <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="btn_top">
  <span>TOP</span>
</div>

 

JS 

 $(document).ready(function() {
   $(window).scroll(function() {
     if ($(this).scrollTop() > 100) {
       $('.btn_top').fadeIn();
     } else {
       $('.btn_top').fadeOut();
     }
   });
   $('.btn_top').click(function() {
     $('html, body').animate({
       scrollTop: 0
     }, 400);
     return false;
   });
 });

 

CSS 

div{padding: 10px;}
div img{width: 100%;}
div p{font-size: 14px;}
.btn_top {
	display:none; //최초에안보여짐 
    position: fixed;
    bottom: 9%;
    right: 5%;
    font-size: 16px;
    color: #fff;
    background-color:rgba(0,0,0,0.8);
    width: 40px;
    height: 40px;
    cursor:pointer;
    line-height: 40px;
    text-align: center;
    -webkit-border-radius: 50%;
    }

 
이 소스는 왠만하면 모든 사이트에 적용되어 있다. 
그리고 물론 href="#top"  이런식으로 해서 상단에 링크를 걸어 줄수 있지만
제이쿼리로 해야 스르륵 하면서 자연스럽게 상단으로 이동해 주는 효과를 줄 수 있다! 
 
최신 제이쿼리 CDN 을 포함하여 적용한다