0

ユーザーがページの下部にあるサーバー側のリンクまたはボタンをクリックしたときに、ブラウザーで 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;
        });

    });

スクロール位置がページの下部にある場合はこのボタンを表示し、スクロール位置がページの上部にある場合はこれを表示したくありません。

スクロール位置がページの一番下にあるときにこのボタンを表示するにはどうすればよいですか?

4

2 に答える 2

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>
于 2012-11-07T04:36:32.167 に答える
0

Add a scroll listener and manage your button visibility by checking if the main container (could be body) scrollTop is max value:

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();
});

More example : http://www.yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/

于 2012-11-04T17:58:30.080 に答える