滚动位置位于页面底部时如何查看图像？

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/