7 CSS Back to top

By | September 30, 2021

Collection of CSS Back to top demos and with code snippet. The “Back to Top” feature is a common feature of many blogs and websites. It allows users to scroll up the page or website which reduces load on their eyes. Scrolling back to the top is even more important on long pages as it helps them navigate through the content easily.

Author

  • rolandtoth
  • April 12, 2018

Link

Made with

  • HTML / SCSS

About the Code

Pure CSS Scroll To Top

A CSS-only solution to reveal a scroll-to-top link only on scrolling down the page + animated scroll back to top.

Requires position: sticky and scroll-behavior: smooth browser support.

More info: Link

Dependency: bootstrap.css


Author

  • alphardex
  • May 11, 2020

Link

Made with

  • HTML / SCSS

About the Code

Backtop

Pure CSS Back To Top

More info: Link

Dependency:


Author

  • csPoint
  • January 6, 2020

Link

Made with

  • HTML / CSS

About the Code

Pure CSS Back to Top Smooth Scrolling Effect

More info: Link

Dependency:


Author

  • Ramiro Silveyra dAvila
  • October 28, 2016

Link

Made with

  • HTML / CSS

About the Code

Back to Top button in pure CSS without HTML anchors or JS

More info: Link

Dependency:


Author

  • Manuel Matuzovic
  • March 10, 2020

Link

Made with

  • HTML / SCSS

About the Code

Native smooth scrolling

More info: Link

Dependency:


Author

  • Abhinav
  • May 15, 2015

Link

Made with

  • HTML / CSS

About the Code

Back to top

Back to top Buttons allow your website visitors to easily scroll back to the top of the page.

More info: Link

Dependency:


Author

  • Rain
  • September 1, 2018

Link

Made with

  • HTML / CSS

About the Code

Smooth Back to Top Pure CSS Only

More info: Link

Dependency:


Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.