滾動位置位於頁面底部時如何查看圖像？

Question

當用戶點擊頁面底部的服務器端鏈接或按鈕時，我需要瀏覽器將我的ASP.NET頁面滾動到頂部。

<div id="box" style=" position: fixed; bottom:5px;"> 
<a href="#top" >Back to up<img height="40" src="../images/btnup.png" /></a> 

我使用此代碼爲它：

$(document).ready(function() { 

     $('a[href=#top]').click(function() { 
      $('html, body').animate({ scrollTop: 0 }, 'slow'); 
      return false; 
     }); 

    }); 

我想顯示這個按鈕，當滾動位置是在頁面的底部，不希望顯示此當滾動位置在頁面的頂部時。

如何在滾動位置位於頁面底部時查看此按鈕？

Answer 1

我用這個代碼。這對我有用。

<style type='text/css'> 
    #bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;} 
    #bttop:hover{border:1px solid #ffa789;background:#ff6734;} 
</style> 
<div id='bttop'>Top</div> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script> 

Answer 2

添加滾動監聽器，並通過檢查主容器（可能是機構）管理您的按鈕知名度scrollTop的是最大值：

var $elem = $('#mainContainer'); 
var $button = $('#top'); 
$(window).scroll(function(){ 
    if ($elem[0].scrollHeight - $elem.scrollTop() == $elem.outerHeight()) { 
     // We're at the bottom. 
     $button .show(); 
    }   
    else 
     $button .hide(); 
}); 

更多例子：http://www.yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/