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

    Why not bootstrap scroll bottom to top working in asp.net

    hi,
    <asp:Content ID="Content1" ContentPlaceHolderID="cHead" runat="Server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="Script/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Script/bootstrap.min.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 () {
    $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
    $('#back-to-top').fadeIn();
    } else {
    $('#back-to-top').fadeOut();
    }
    });
    // scroll body to 0px on click
    $('#back-to-top').click(function () {
    $('#back-to-top').tooltip('hide');
    $('body,html').animate({
    scrollTop: 0
    }, 800);
    return false;
    });

    $('#back-to-top').tooltip('show');
    });
    </script>
    <style type="text/css">
    .back-to-top
    {
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right: 20px;
    display: none;
    }
    </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="mBody" runat="Server">
    <div class="container">
    <div class="row">
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    This is sample text<br />
    </div>
    </div>
    <%-- <a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" title="Back to Top">
    <span class="glyphicon glyphicon-chevron-up"></span></a>--%>
    <p>
    <a id="back-to-top" href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-chevron-up">
    </span>Up </a>
    </p>
    </asp:Content>
  • #766283
    Hi

    If your Content length means we cant restrict scroll down.

    you can try to accordion panel for this

    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

  • #766285
    Hi,
    I tried your code, it is working fine for me.
    The only difference is I have an extra reference of this file:

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    You can find below attached project.

  • #766286

    masterPageTest.zip

    Delete Attachment


Sign In to post your comments