0

I need the browser to scroll my ASP.NET page to the top when the user clicks on a server-side link or button at the bottom of the page. 

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

I use this code for it:

 $(document).ready(function () {

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

    });

I want to show this button when the scroll position is at the bottom of the page and don't want to show this when the scroll position is at the top of the page.

How to view this button when the scroll position is at the bottom of the page?

Picrofo Software
  • 5,475
  • 3
  • 23
  • 37
ar.gorgin
  • 4,765
  • 12
  • 61
  • 100

2 Answers2

1

I use this code. it is useful for me.

<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>
ar.gorgin
  • 4,765
  • 12
  • 61
  • 100
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/

sdespont
  • 13,915
  • 9
  • 56
  • 97
  • Thanks alot, but i get error "Unable to get property 'scrollHeight' of undefined or null reference" – ar.gorgin Nov 04 '12 at 18:25
  • ´$('#mainContainer')´was just an example, did you change the id with your main container id? – sdespont Nov 04 '12 at 18:31
  • And a related topic : http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom – sdespont Nov 04 '12 at 18:43
  • Thanks a lot, yes i change but i want show button when windows scroll position is bottom. and i use your link, but this work in ie but don't work in Firefox:( – ar.gorgin Nov 05 '12 at 09:19
  • Have you specified the page ´DOCTYPE´ correctly? http://www.w3schools.com/html/html_xhtml.asp the reason is the browser don't have the same native behaviour. So, you must specify a standard to use => http://www.quirksmode.org/css/quirksmode.html – sdespont Nov 06 '12 at 06:25