"Vertical buttons + go to top"
Bootstrap 3.3.0 Snippet by 2mail2

<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 ----------> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <div id="content"><h1>Please scroll down...</h1></div> <div id="vbnav"> <div class="btn-group show-on-hover dropup"> <ul class="dropdown-menu"> <li><a href="#" rel="tooltip" data-placement="left" id="toTop" title="to top"><i class="fa fa-angle-double-up"></i></a></li> <li><a href="#" rel="tooltip" data-placement="left" title="Calc"><i class="fa fa-calculator"></i></a></li> <li><a href="#" rel="tooltip" data-placement="left" title="New user"><i class="fa fa-user-plus"></i></a></li> <li><a href="#" rel="tooltip" data-placement="left" title="Sent email"><i class="fa fa-envelope-o"></i></a></li> </ul> </div> </div>
body{ padding:10px; } #content{ height: 5000px; } /* ----------------------------- */ #vbnav { position:fixed; bottom:5px; right:5px; cursor:pointer; } #vbnav .show-on-hover:hover > ul.dropdown-menu { display: block; } #vbnav .show-on-hover { position: absolute; bottom: 20px; right: 70px; } #vbnav .btn-io{ border-radius: 50%; height: 54px; width: 54px; padding: 0 !important; box-shadow: 0px 3px 7px 0px rgba(202, 124, 124, 0.72); } #vbnav .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; margin-bottom: -5px; padding-bottom: 30px; } #vbnav .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: block; float: left; min-width: 50px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: center; list-style: none; background-color: rgba(255, 255, 255, 0) !Important; -webkit-background-clip: padding-box; background-clip: padding-box; border: none; border-radius: 0px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0) !Important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0) !Important; } #vbnav .fa-iox{ font-size: 22px; } #vbnav .dropdown-menu > li > a { display: block; padding: 0; padding-top: 4px; margin-top: 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; background: #fff; white-space: nowrap; width: 40px; height: 40px; border: solid 1px #ccc; border-radius: 50px; font-size: 21px; box-shadow: 0px 3px 7px 0px rgba(203, 203, 203, 0.72); } #vbnav .dropdown-menu > li:first-child>a { background: #6E4320 !important; color: #fff !important; } #vbnav .dropdown-menu > li:last-child>a { background: #D3A516; color: #fff; } #vbnav .dropdown-menu > li:nth-child(3)>a { background: #3C80F6; color: #fff; } #vbnav .dropdown-menu > li:nth-child(2)>a { background: #2CAC26; color: #fff; } #vbnav .fa-iosm{ margin-top: 7px; }
$(function () { $('[rel="tooltip"]').tooltip(); }) $(function(){ $.fn.scrollToTop=function(){ $(this).hide().removeAttr("href"); if($(window).scrollTop()!="0"){ $(this).fadeIn("slow"); } var scrollDiv=$(this); $(window).scroll(function(){ if($(window).scrollTop()=="0"){ $(scrollDiv).fadeOut("slow"); }else{ $(scrollDiv).fadeIn("slow"); } }); $(this).click(function(){ $("html, body").animate({scrollTop:0},"slow"); }) } }); $(function(){ $("#toTop").scrollToTop(); });

Related: See More


Questions / Comments: