Description:
In this example we explain that how to scroll to top on click using jQuery bootstrap. Or how to create a scroll back to top button in asp.net using jQuery bootstrap. Or bootstrap snippets link to top page using HTML CSS and jQuery. Or implement bootstrap snippets scroll top scroll bottom using jQuery. Or create smooth page scroll to top using jQuery bootstrap.
So here we demonstrate
that how to create an animated scroll to top button with jQuery bootstrap in
asp.net.so how to add a scroll to top button in your website or blog with
responsive bootstrap snippets using jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>scroll to
top on click jquery bootstrap</title>
<style type="text/css">
.back-to-top
{
cursor:
pointer;
position:
fixed;
bottom:
20px;
right:
20px;
display:
none;
}
</style>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
rel="stylesheet"
id="bootstrap-css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<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>
<!------
Include the above in your HEAD tag ---------->
</head>
<body>
<div class="container" style="height: 100px;">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th>
Order No
</th>
<th>
Customer Name
</th>
<th>
Total Amount
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
O001
</td>
<td>
Kirit
</td>
<td>
5000
</td>
</tr>
<tr>
<td>
O002
</td>
<td>
Rahul
</td>
<td>
6000
</td>
</tr>
<tr>
<td>
O003
</td>
<td>
Rohit
</td>
<td>
45000
</td>
</tr>
<tr>
<td>
O004
</td>
<td>
Amit
</td>
<td>
8000
</td>
</tr>
<tr>
<td>
O005
</td>
<td>
John
</td>
<td>
6000
</td>
</tr>
<tr>
<td>
O006
</td>
<td>
Dan
</td>
<td>
5020
</td>
</tr>
<tr>
<td>
O007
</td>
<td>
Ankit
</td>
<td>
2500
</td>
</tr>
<tr>
<td>
O008
</td>
<td>
Jayesh
</td>
<td>
30000
</td>
</tr>
<tr>
<td>
O009
</td>
<td>
kalpesh
</td>
<td>
7400
</td>
</tr>
</tbody>
</table>
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button"
title="Click to return on the top page" data-toggle="tooltip"
data-placement="left">
<span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment