devooti logo

Back to Top Button using jQuery and CSS

January 25 - 2024
Back to Top Button using jQuery and CSS

Creating a Back to Top button enhances the user experience of a website, especially for pages with extensive content. This button allows users to effortlessly return to the top of the page with a single click, eliminating the need for manual scrolling.

This tutorial demonstrates how to craft a Back to Top button using jQuery and CSS. Positioned at the right-bottom corner of the content area, the button automatically appears after the browser window has been scrolled down. When clicked, the page smoothly scrolls back to the top. This feature streamlines navigation, enabling users to swiftly navigate from the bottom to the top of the webpage.

The Back to Top button is a valuable addition for websites with lengthy content, offering a quick and easy way for users to navigate to the top section without manual scrolling. The integration of jQuery and CSS simplifies the creation of this button, providing an efficient solution without relying on third-party plugins.

Follow these straightforward steps to implement a scroll Back to Top button on your website using jQuery and CSS, enhancing the overall user navigation experience.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>jQuery Back To Top Button by CodeAT21</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            if($(this).scrollTop() > 100){
                $('#scroll').fadeIn();
            }else{
                $('#scroll').fadeOut();
            }
        });
        $('#scroll').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });
    });
    </script>
    <style type="text/css">
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    h1{font-size:45px;text-align:center; text-decoration:underline;}
    h3{font-size:40px;color:#FA0530}
    p{font-size:40px;}
    #scroll {
        position:fixed;
        right:10px;
        bottom:10px;
        cursor:pointer;
        width:50px;
        height:50px;
        background-color:#3498db;
        text-indent:-9999px;
        display:none;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
    }
    #scroll span {
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-8px;
        margin-top:-12px;
        height:0;
        width:0;
        border:8px solid transparent;
        border-bottom-color:#ffffff
    }
    #scroll:hover {
        background-color:#e74c3c;
        opacity:1;
        filter:"alpha(opacity=100)";
        -ms-filter:"alpha(opacity=100)";
    }
    </style>
</head>
<body>
    <div class="container">
        <!-- BackToTop Button -->
        <a href="#" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>
        <h1>jQuery Back to Top Button by CodeAT21</h1>
        <p>In a disorienting world, with obstacle after obstacle, and the landscape of our lives shifting in ways we never expected, we can trust that as we look to our Maker, the WayMaker, our road will lead us to arrive exactly where we always hoped it would, though maybe not at all in the way we imagined. And those dreams for our lives? They can still happen—in ways only He perfectly dreamed of. </p>
        <p>It is true: heartache, grief, suffering, obstacles, they all come in waves. There is no controlling life’s storms; there is only learning the way to walk through the waves. In WayMaker, bestselling author Ann Voskamp hands us a map that makes meaning of life, that shows the way through to the places we’ve only dreamed of reaching, by a way we never expected. Voskamp reveals how God is present in the totality of our lives, making a wayfor the marriage that seems impossible,for the woman who longs for a child of her own,for the parents who ache for the return of their prodigal,for the sojourner caught between a rock and a hard place, and for the wayfarer who feels as though there is no way through to her dreams. We can encounter the WayMaker in surprising ways and begin to see Him not only making poetry out of pain but working in every miraculous detail of our lives. Even now, the Way is making the way to walk through waves and into a life more deeply fulfilling than our wildest dreams.</p>
        <p> When you're a bear who is easily scared, it's hard to have friends. Fortunately, Bear has one: Rabbit, who is very brave. One day, Rabbit urges Bear to face his fears and embark on an adventure together. However, things don't entirely go as planned, and the two friends learn the true meaning of bravery.</p>
        <p> Equal parts hilarious and touching, this funny tale of adventure, bravery, and daring rescue will both inspire the adventurous spirit in all of us and make us laugh along the way. With the unfailingly witty voice of one of America's favorite comedians, Seth Meyers's debut picture book is bound for hilarity history. </p>
    </div>
</body>
</html>

Meta Information: The section includes meta tags, the document title, and a link to the jQuery library hosted on Google's CDN.

JavaScript (jQuery):

  • $(document).ready(function(){ ... });: Ensures that the jQuery code runs after the document is fully loaded.
  • $(window).scroll(function(){ ... });: Listens for scroll events on the window.
  • $('#scroll').fadeIn(); and $('#scroll').fadeOut();: Toggle the visibility of the back-to-top button based on the scroll position.
  • $('#scroll').click(function(){ ... });: Initiates a smooth scroll animation to the top when the back-to-top button is clicked.

CSS Styles:

  • .container: Sets maximum width and margin for the content container.
  • h1 and p: Defines styles for heading and paragraph elements.
  • #scroll: Styles for the back-to-top button, including position, size, background color, and border-radius.
  • #scroll span: Creates an arrow inside the button using CSS borders.
  • #scroll:hover: Styles for the button when hovered, changing the background color and opacity.

HTML Content: The actual content of the webpage is contained within the .container div, including the back-to-top button, a heading, and several paragraphs of text.

In summary, this code creates a webpage with a back-to-top button that becomes visible when the user scrolls down. Clicking the button smoothly scrolls the page back to the top. The styles are defined using both CSS and inline styles for simplicity.

You may also like…

Related posts

How To Use the .htaccess File
January 25 - 2024

How To Use the .htaccess File

The .htaccess (hypertext access) file is a configuration file used on web servers running the Apache web server software. It allows you to customize various aspects of your website's behavior at the directory level, without altering server configuration files. Here's a basic guide on how to use the .htaccess file:Creating the .htaccess File:The .htaccess file is a plain text file, and you can create it using a text editor like Notepad on Windows or TextEdit on macOS.Save the file with the name ".htaccess" (make sure there is no extension like .txt).File Location:The .htaccess file is typically placed in the root directory of your website. It can also be placed in specific directories to appl...
Smooth Scroll to Div using jQuery
January 25 - 2024

Smooth Scroll to Div using jQuery

Smooth scrolling using jQuery enhances the user interface of web projects, reducing the effort required to navigate to specific sections of a page. By incorporating smooth scroll functionality, users can effortlessly reach desired portions of the page through anchor links or buttons.Utilizing the jQuery scrollTop method simplifies the process of scrolling to a specific div element. To add a touch of animation to the page scroll, the jQuery animate() method can be employed. In this tutorial, we'll guide you through implementing smooth scrolling to a div using jQuery, eliminating the need for manual scrolling.Scrolling to a DivThe Scroll to Div feature proves particularly beneficial for single...
How to install Tailwind CSS in React
January 25 - 2024

How to install Tailwind CSS in React

To install Tailwind CSS in a React project, you can follow these steps:Step 1: Create a new React projectIf you haven't already created a React project, you can use Create React App to quickly set up a new one. Open your terminal and run:npx create-react-app my-tailwind-app cd my-tailwind-app Replace "my-tailwind-app" with your desired project name.Step 2: Install Tailwind CSSInside your React project, you need to install Tailwind CSS along with its dependencies. Run the following command:npm install tailwindcss postcss autoprefixer Step 3: Create a configuration file for Tailwind CSSCreate a tailwind.config.js file in the root of your project. You can generate a basic configuration file ...

Devooti   © All Rights Reserved - 2024