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

Posted by Cpatil1000 under ASP.NET on 6/1/2016 | Points: 10 | Views : 312 | Status : [Member] | Replies : 2
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 />





Responses

Posted by: A2H on: 6/1/2016 [Member] [MVP] Silver | Points: 50

Up
0
Down

Resolved
Additionaly since you are using content placeholder try using the css selector to refer the button instead of id. when control is inside the contentplaceholder the id of control will change at runtime.
Try with the below updated code

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

Ensure that you have applied the css to your back to top button

 <input type="button" id="back-to-top" value="back-to-top" class="back-to-top">


Thanks,
A2H
My Blog

Cpatil1000, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 6/1/2016 [Member] [MVP] Silver | Points: 25

Up
0
Down
Your code is working fine with out any issues when I tried in my sample application. You can find the demo at this link : http://jsbin.com/nipayewicu/edit?html,output

As a troubleshooting step you can try with the below options.

First Ensure that the Jquery and Bootstrap js files are referenced properly. You might want to try using the ResolveUrl() method when setting the appropriate URL for your Jquery files.

<!-- Use the ResolveUrl Method to properly map the url -->
<script src="<%= ResolveUrl("~/Script/jquery-1.7.2.min.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Script/bootstrap.min.js") %>" type="text/javascript"></script>


Thanks,
A2H
My Blog

Cpatil1000, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response