"scroll top scroll bottom"
Bootstrap 3.3.0 Snippet by sumi9xm

<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> // scrolltop $('.scrollup').click(function (){ $("html,body").animate({ scrollTop: 0 }, 1000); return false; }); </script> </div>
.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); } 100% { opacity: 0; transform: translateY(14px); } } #section-1{ height:50px; width:100%; background-color:#2196f3; } #blank{ height:1200px; } #section-2{ height:50px; width:100%; background-color:#ff5722; } /*BOTTOM TO - TOP*/ .scrollup{ font-size: 20px;color: #fff; background-color: #2196F3; border: 1px solid #A2A2A2; text-align: center; padding: 6px; width: 30px; height: 30px; position: fixed; bottom: 50px; right:30px; cursor: pointer; }
$(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(); } });

Related: See More


Questions / Comments: