
Tooltips with Positioning (Top, Bottom, Left, Right)
July 26, 2024
Gallery with varied image sizes using aspect-ratio and object-fit
July 29, 2024
A “Back to Top” button is a simple yet useful feature that helps with navigation especially on long pages. This button gives users a quick way to get back to the top of the page without excessive scrolling. The following example is a pure CSS solution for smooth scrolling, combined with jQuery to show and hide the button based on the user’s scroll position. This way the button is out of sight until needed, keeping the interface clean and user friendly.
HTML
<a href="#header" id="sf-back-to-top">↑</a>
CSS
/* ---------------------------------------------------------- */
/* Snippflow Back to top */
/* ---------------------------------------------------------- */
html {
scroll-behavior: smooth;
}
#sf-back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 15px;
font-size: 16px;
background-color: #46a787;
color: #fff;
text-decoration: none;
border-radius: 3px;
z-index: 100;
transition: all 0.3s ease-in-out;
}
#sf-back-to-top:hover {
transform: scale(1.1);
}
jQuery
$(document).ready(function() {
var backToTopButton = $('#sf-back-to-top');
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
backToTopButton.fadeIn();
} else {
backToTopButton.fadeOut();
}
});
});
Result:
See the Pen Untitled by Snippflow (@snippflow) on CodePen.