<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 ----------> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi orci, auctor non luctus eget, commodo non dolor. Morbi cursus, nisi at sagittis dapibus, lorem purus lacinia metus, in viverra purus ante ac mauris. Duis scelerisque sed turpis ut eleifend. Nulla sit amet porta nibh. Integer imperdiet lacus sit amet gravida dapibus. Sed id malesuada ipsum. Curabitur nibh libero, dapibus ut lacus nec, varius facilisis sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dolor eros, dignissim et sem vel, vulputate aliquet erat. Vestibulum nisl urna, ultrices mollis libero eget, laoreet bibendum ante. Nulla quis ipsum at est porttitor facilisis eget in risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pellentesque eu libero eget dictum.</p> <p>Integer sodales nisi lectus, ut mattis purus volutpat in. Donec erat diam, pretium vitae erat a, commodo rutrum odio. Nam quis neque non urna pulvinar egestas eget consectetur diam. Curabitur interdum mi enim, vitae feugiat orci aliquet vel. Phasellus nec sagittis diam. Nulla volutpat interdum orci vitae tempus. Pellentesque nec magna vitae nibh aliquam porttitor. Sed eget sapien in nulla fringilla mollis id eget felis. Fusce gravida orci tellus, at ultrices enim placerat vitae. Nulla placerat mauris nec ullamcorper semper. Pellentesque nec tempor risus. Nullam sit amet velit elementum, sollicitudin risus a, pharetra quam. Nunc nisl sapien, semper nec pellentesque vitae, laoreet sed sapien. Ut malesuada libero vitae tristique fermentum. Curabitur vestibulum odio et tellus ultricies, ut rutrum ante imperdiet.</p> <p>Mauris in pulvinar augue. Suspendisse fermentum pharetra ligula, porta vehicula nulla euismod et. Ut euismod, ipsum in eleifend faucibus, eros orci congue nibh, ut suscipit odio urna vel nisi. In congue volutpat nibh, eget fringilla dui. Nullam in est ac tortor lobortis tincidunt ut a diam. Donec quis nisi pharetra, rhoncus augue nec, sodales sapien. Praesent feugiat pharetra convallis. Donec ac porttitor dolor. Vestibulum tempus, leo id blandit varius, dui libero porttitor ligula, non sagittis sem sapien accumsan risus. Vestibulum vel pulvinar leo. In hac habitasse platea dictumst. Nunc volutpat nunc nec mi dictum tincidunt. Fusce vitae scelerisque quam.</p> <p>Donec ornare augue sed nibh commodo, sed eleifend felis eleifend. Morbi vulputate feugiat lacus bibendum pharetra. Fusce in nibh nec est rutrum semper. Suspendisse potenti. Morbi gravida pharetra lorem, consectetur dapibus magna aliquet dictum. Phasellus dapibus velit a massa aliquet, et posuere nunc dictum. Aliquam lectus est, rhoncus ut eleifend sit amet, tristique sollicitudin arcu. Nam eget iaculis urna, ut rhoncus ante. Curabitur rutrum eros nulla, id mattis augue faucibus ut. Cras vel erat at sem lobortis consequat. In pretium porta augue, non rutrum leo tempor ac.</p> <p>Sed sagittis sem consequat dui pharetra, nec accumsan eros bibendum. Suspendisse eget metus ullamcorper, semper leo feugiat, elementum dolor. Nulla facilisi. Ut semper eros in mollis bibendum. In sed facilisis est, quis bibendum nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ullamcorper nunc sit amet justo facilisis tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Mauris in pulvinar augue. Suspendisse fermentum pharetra ligula, porta vehicula nulla euismod et. Ut euismod, ipsum in eleifend faucibus, eros orci congue nibh, ut suscipit odio urna vel nisi. In congue volutpat nibh, eget fringilla dui. Nullam in est ac tortor lobortis tincidunt ut a diam. Donec quis nisi pharetra, rhoncus augue nec, sodales sapien. Praesent feugiat pharetra convallis. Donec ac porttitor dolor. Vestibulum tempus, leo id blandit varius, dui libero porttitor ligula, non sagittis sem sapien accumsan risus. Vestibulum vel pulvinar leo. In hac habitasse platea dictumst. Nunc volutpat nunc nec mi dictum tincidunt. Fusce vitae scelerisque quam.</p> <p>Donec ornare augue sed nibh commodo, sed eleifend felis eleifend. Morbi vulputate feugiat lacus bibendum pharetra. Fusce in nibh nec est rutrum semper. Suspendisse potenti. Morbi gravida pharetra lorem, consectetur dapibus magna aliquet dictum. Phasellus dapibus velit a massa aliquet, et posuere nunc dictum. Aliquam lectus est, rhoncus ut eleifend sit amet, tristique sollicitudin arcu. Nam eget iaculis urna, ut rhoncus ante. Curabitur rutrum eros nulla, id mattis augue faucibus ut. Cras vel erat at sem lobortis consequat. In pretium porta augue, non rutrum leo tempor ac.</p> <p>Sed sagittis sem consequat dui pharetra, nec accumsan eros bibendum. Suspendisse eget metus ullamcorper, semper leo feugiat, elementum dolor. Nulla facilisi. Ut semper eros in mollis bibendum. In sed facilisis est, quis bibendum nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ullamcorper nunc sit amet justo facilisis tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Mauris in pulvinar augue. Suspendisse fermentum pharetra ligula, porta vehicula nulla euismod et. Ut euismod, ipsum in eleifend faucibus, eros orci congue nibh, ut suscipit odio urna vel nisi. In congue volutpat nibh, eget fringilla dui. Nullam in est ac tortor lobortis tincidunt ut a diam. Donec quis nisi pharetra, rhoncus augue nec, sodales sapien. Praesent feugiat pharetra convallis. Donec ac porttitor dolor. Vestibulum tempus, leo id blandit varius, dui libero porttitor ligula, non sagittis sem sapien accumsan risus. Vestibulum vel pulvinar leo. In hac habitasse platea dictumst. Nunc volutpat nunc nec mi dictum tincidunt. Fusce vitae scelerisque quam.</p> <p>Donec ornare augue sed nibh commodo, sed eleifend felis eleifend. Morbi vulputate feugiat lacus bibendum pharetra. Fusce in nibh nec est rutrum semper. Suspendisse potenti. Morbi gravida pharetra lorem, consectetur dapibus magna aliquet dictum. Phasellus dapibus velit a massa aliquet, et posuere nunc dictum. Aliquam lectus est, rhoncus ut eleifend sit amet, tristique sollicitudin arcu. Nam eget iaculis urna, ut rhoncus ante. Curabitur rutrum eros nulla, id mattis augue faucibus ut. Cras vel erat at sem lobortis consequat. In pretium porta augue, non rutrum leo tempor ac.</p> <div id="to-top">Back to Top</div> </div> <footer> <p>This is a footer. The button should never enter this region, and stay at the top of footer when footer is visible on the screen.</p> </footer>

.content { position: relative; } footer { background-color: green; height: 300px; } #to-top { position:fixed; bottom: 10px; right: 10px; width: 100px; padding: 5px; border: 1px solid #ccc; background: red; color: white; font-weight: bold; text-align: center; cursor: pointer; display: none; }

function isVisible(elment) { var vpH = $(window).height(), // Viewport Height st = $(window).scrollTop(), // Scroll Top y = $(elment).offset().top; return y <= (vpH + st); } $(window).scroll(function() { if($(this).scrollTop() == 0) { $('#to-top').fadeOut(); } else if (isVisible($('footer'))) { $('#to-top').css('position','absolute'); } else { $('#to-top').css('position','fixed'); $('#to-top').fadeIn(); } }); $('#to-top').click(function() { $('body,html').animate({scrollTop:0},"fast"); });