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

상단으로 이동 버튼

페이지 정보

작성자 MintState 댓글 0건 조회 4,454회 작성일 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, 53 views)

댓글목록

등록된 댓글이 없습니다.

Total 178건 9 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
18 MintState 9758 11-17
17 MintState 9721 11-17
16 MintState 9617 11-19
15 MintState 9591 11-17
14 MintState 9349 11-17
13 MintState 9233 11-17
12 MintState 9203 11-14
11 MintState 9167 10-31
10 MintState 8990 10-31
9 MintState 8702 03-05
8 MintState 7927 03-08
7 MintState 7669 11-02
6 MintState 7476 09-26
5 MintState 7418 07-01
4 MintState 6917 10-27
3 MintState 5746 07-24
열람중 MintState 4455 04-19
1 MintState 4170 03-22
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™