Question

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?

Answer 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>