YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

상단으로 이동 버튼

페이지 정보

작성자 MintState 댓글 0건 조회 439회 작성일 18-04-19 11:23

본문

상단으로 이동 버튼

홈페이지가 길어지면 상단으로 버튼을 만드는 것이 좋다.
스크롤에 따라 나타났다 사라졌다 하는 버튼을 만들어 본다.

<!--상단올라가기-->
<script type=text/javascript>
$(document).ready(function(){
    $(".return-top").hide(); // 탑 버튼 숨김
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { // 스크롤 내릴 표시
                $('.return-top').fadeIn();
            } else {
                $('.return-top').fadeOut();
            }
        });
        $('.return-top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);  // 탑 이동 스크롤 속도
            return false;
        });
    });
});
</script>
<a class="return-top" href="#"><img src="./img/topbtn.png"></a>
<style>
.return-top {right:10px; bottom:30px; position:fixed; z-index:9999; padding:5px 10px 10px 10px;}
.return-top img {width:45px;}	
</style>
<!--상단올라가기끝-->



중앙 정렬 홈페이지 일경우.
<div class="return-top"><a href="#"><img src="./img/topbtn.png"></a></div>
<style>
.return-top {left:50%;bottom:30px;position:fixed;z-index:9999;margin-left:530px;}
.return-top a {padding:5px 10px 10px 10px;}	
.return-top img {width:45px;}	
</style>
첨부 파일
파일 종류: png topbtn.png (3.4K, 7 views)

댓글목록

등록된 댓글이 없습니다.

Total 177건 1 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
177 MintState 230 07-24
열람중 MintState 440 04-19
175 MintState 1212 11-02
174 MintState 1121 10-27
173 MintState 1196 09-26
172 MintState 1863 03-08
171 MintState 2271 11-14
170 MintState 2245 07-01
169 MintState 3244 03-05
168 MintState 4182 11-19
167 MintState 9520 04-11
166 MintState 8228 04-06
165 MintState 8413 07-23
164 MintState 8332 06-09
163 MintState 10138 04-29
162 MintState 11414 04-29
161 MintState 8776 04-16
160 MintState 14675 02-17
159 MintState 14986 01-19
158 MintState 11104 10-27
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2018, YesYo.com MintState. ™