상단에 스크롤 상단에

Question

몇 가지 예를 사용하여 페이지를 아래로 스크롤 할 때 페이지 상단으로 돌아 가기 버튼으로 돌아 가기 위해 을 다시 보았습니다. 바닥 글에 도달 할 때까지 단추를 화면 하단에 붙이면 바닥 글의 맨 위에 고정됩니다.

이 지금까지 내 코드입니다 : 나는 또한 여기에 Jfiddle을했습니다

<script type="text/javascript" defer="defer"> 
    $(window).scroll(function() { 
     if ($(this).scrollTop()) { 
      $("#toTop").fadeIn(); 
     } else { 
      $("#toTop").fadeOut(); 
     } 
    }); 


    $("#toTop").click(function() { 
     $("html, body").animate({scrollTop: 0}, 1000); 
    }); 
</script> 

<style type="text/css"> 
    .backtotop_button_wrap {width:100%; background:white; height:auto;} 
    .backtotop_button_height {width:100%; height:55px;} 
    #toTop {display:none; position: fixed; right:0; bottom:0; width:100px; height:auto; background:white; float:right; padding:10px; text-align:center; border:1px solid black; line-height:12px;} 
    #footer {width:100%; height:500px; color:white; text-align:center; background:#313131; border-top:1px solid black;} 
</style> 

<div class="backtotop_button_wrap"> 
    <div class="backtotop_button_height"> 
     <div id="toTop">^<br />Back to the Top</div> 
    </div> 
</div> 
<div id="footer"> 
Footer 
</div> 

: http://jsfiddle.net/0Lge6wqq/

Answer 1

변경의 #footer에 #toTop의 HTML 위치입니다. 창이 바닥 글의 높이에 도달하면. #toTop이 고정에서 상대적으로 바뀝니다.

 if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()){ 
      $('#toTop').css("position","fixed"); //resetting it 
      $('#toTop').css("bottom","0"); //resetting it 
} 
else { 
      $('#toTop').css("position","relative"); // make it related 
      $('#toTop').css("bottom","60px"); // 60 px, height of #toTop 
} 

당신이 정상에 다시 필요

http://jsfiddle.net/0Lge6wqq/4/