Tooltips with Positioning (Top, Bottom, Left, Right)
Tooltips with Positioning (Top, Bottom, Left, Right)
July 26, 2024
Gallery with varied image sizes using aspect-ratio and object-fit
Gallery with varied image sizes using aspect-ratio and object-fit
July 29, 2024

July 29, 2024

Back to Top button with smooth scroll

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more