search results:

    • Standard
    • React
    License Learn Community
    • + D
    • Light
    • Dark
    • System
    Pricing
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • CommercialNew
      • Pricing
      • License
      • Premium Support
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    Scroll back to top button

    Tailwind CSS Scroll Back To Top Button

    Use responsive scroll back to top component with helper examples for scroll back to top button animation, appear after scroll & more. Open source license.


    Basic example

    Button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content.

    Use the code below to create button that scrolls back to the beginning of the page.

    live demo
    • HTML
    • javascript
    • umd
            
                
          <!-- Back to top button -->
          <button
            type="button"
            data-te-ripple-init
            data-te-ripple-color="light"
            class="!fixed bottom-5 right-5 hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"
            id="btn-back-to-top">
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              class="h-4 w-4"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 448 512">
              <path
                fill="currentColor"
                d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path>
            </svg>
          </button>
    
          <!-- Explanation -->
          <div
            class="container mx-auto mt-4 text-center text-neutral-800 dark:text-white"
            style="height: 2000px">
            <p class="mb-4">
              Start scrolling the page and a strong
              <strong>"Back to top" button </strong> will appear in the
              <strong>bottom right corner</strong> of the screen.
            </p>
            <p>Click this button and you will be taken to the top of the page.</p>
          </div>
          
            
        
            
                
          import {
            Ripple,
            initTE,
          } from "tw-elements";
    
          initTE({ Ripple });
    
          // Get the button
          const mybutton = document.getElementById("btn-back-to-top");
    
          // When the user scrolls down 20px from the top of the document, show the button
    
          const scrollFunction = () => {
            if (
              document.body.scrollTop > 20 ||
              document.documentElement.scrollTop > 20
            ) {
              mybutton.classList.remove("hidden");
            } else {
              mybutton.classList.add("hidden");
            }
          };
          const backToTop = () => {
            window.scrollTo({ top: 0, behavior: "smooth" });
          };
    
          // When the user clicks on the button, scroll to the top of the document
          mybutton.addEventListener("click", backToTop);
    
          window.addEventListener("scroll", scrollFunction);
          
            
        
            
                 
          // Get the button
          const mybutton = document.getElementById("btn-back-to-top");
    
          // When the user scrolls down 20px from the top of the document, show the button
    
          const scrollFunction = () => {
            if (
              document.body.scrollTop > 20 ||
              document.documentElement.scrollTop > 20
            ) {
              mybutton.classList.remove("hidden");
            } else {
              mybutton.classList.add("hidden");
            }
          };
          const backToTop = () => {
            window.scrollTo({ top: 0, behavior: "smooth" });
          };
    
          // When the user clicks on the button, scroll to the top of the document
          mybutton.addEventListener("click", backToTop);
    
          window.addEventListener("scroll", scrollFunction);
          
            
        

    Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email


    Related resources

    Tutorials:

    icons buttons ripple effect rounded corners shadows sizing footer

    Extended Docs:

    colors hover effects icons footer pagination buttons testimonials timeline ripple breakpoints color picker colors dark theme display flex float right hero icons icons position spacing sticky footer visibility hidden z index

    Design System (Figma):

    introduction size matters low contrast vs low aesthetics let it breathe do not start with the roof design system plan the process principles tips and tricks
    • Basic example
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com