You must Sign In to post a response.
  • Category: ASP.NET

    How to bottom to top in asp.net

    hi,
    i am working in the bootstrap with asp.net . my child form is 'content'. i am trying this following coding. I want when page is gone buttom
    the bottom to top image display and when i press that image my page should go top.

    <asp:Content ID="Content1" ContentPlaceHolderID="cHead" runat="Server">
    <link href="Style/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="Style/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Script/jquery-1.4.1.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <script type="text/javascript">
    $(document).ready(function () {
    //Hide Back to top button
    $("#back-to-top").hide();
    $(window).scroll(function () {
    if ($(window).scrollTop() > 200) {
    $('#back-to-top').fadeIn();
    } else {
    $('#back-to-top').fadeOut();
    }
    });
    $('#back-to-top img').click(function () {
    $('body').animate({
    scrollTop: 0
    }, 1000);
    });
    });
    </script>
    <style type="text/css">
    #back-to-top
    {
    position: fixed;
    bottom: 30px;
    top: 350px;
    }
    #back-to-top img
    {
    cursor: pointer;
    }
    </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="mBody" runat="Server">
    <!-- /navbar -->
    <h1>
    Back To Top Demo by Nitesh Luharuka</h1>
    <div class="container" style="height: 1000px">
    </div>
    <span id="back-to-top">
    <img alt="" src="Image/Arrow-Up.png" /></span>
    </asp:Content>
  • #766261
    Hi,
    Everything looks fine except one line i.e. $('body').animate({ scrollTop: 0 }, 1000);
    Just replace it with this one:

    $('html,body').animate({ scrollTop: 0 }, 1000);

    * Just added 'html' keyword so that it will animate whole html contents.


Sign In to post your comments