"scroll top scroll bottom"
Bootstrap 3.3.0 Snippet by sumi9xm

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<script src="https://use.fontawesome.com/07b0ce5d10.js"></script>
</head>
<div class="container">
<div class="row">
<a href="#section-2" class="mouse" aria-hidden="true">
<span class="mouse__wheel"></span>
</a>
</div>
<br> <br> <br> <br> <br>
<div class="row">
<div id="section-1" class="text-center"> scroll-top to bottom</div>
</div>
<div class="row">
<div id="blank">
sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>
sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>
sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>sumi9xm@gmail.com<br>
</div>
</div>
<div class="row">
<div id="section-2" class="text-center">BOTTOM TO TOP CLICK RIGHT BUTTON</div>
</div>
<br><br><br>
<div class="scrollup" href="#"><i class="fa fa-angle-double-up" aria-hidden="true"></i></div>
<script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 48px;
border-radius: 12px;
background-color:transparents;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
border: 2px solid white;
position: absolute;
top: 40px;
position: absolute;
left: 51%;
margin-left: -26px;
}
.mouse__wheel {
display: block;
margin: 6px auto;
width: 3px;
height: 3px;
border-radius: 4px;
background-color:#222;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateY(0);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
// Add smooth scrolling to all links
$(".mouse").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
//bottom to top
// fadeIn fadeOut
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard React
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe

Questions / Comments: