Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
  <div class="container">
    <h1>Back to Top Button</h1>
    <h2>Scroll Down to display the button</h2>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur qui cupiditate, quae ex error iure quo possimus dolores sed ipsum praesentium commodi molestias officiis. Nostrum minus distinctio doloribus mollitia rerum officia velit aspernatur eaque perferendis eveniet voluptate est aut inventore ipsa facere ratione, quaerat nihil magnam qui pariatur! Quaerat optio tenetur atque? Numquam doloremque adipisci aspernatur assumenda nobis. Eius delectus ut maiores vitae. Dicta sit, libero quia ullam optio recusandae, harum soluta cupiditate provident quas sint! Possimus laborum sint fuga aut vitae repellendus, mollitia est, excepturi impedit accusantium quos laudantium eius ratione ad, rem error ex asperiores illo dolorem nulla.</p>
    <p>Unde blanditiis autem rerum quia, reiciendis illum optio rem soluta eos? Voluptas sequi quaerat ut ab consequuntur est, nobis quam dolores praesentium modi, voluptates omnis suscipit officiis repellendus facilis blanditiis nam quas expedita nostrum unde vitae eveniet? Autem eos consectetur ipsum temporibus sunt minima, minus aliquid nihil provident ea? Soluta necessitatibus quia error quasi, nobis illum nulla vero odio quam assumenda esse doloribus modi libero, reiciendis cupiditate unde deleniti minima perspiciatis facere adipisci blanditiis dolore itaque ipsum. Excepturi modi aliquid dolore facere saepe nam delectus, quos omnis inventore labore nulla, consectetur nemo repellendus natus maiores odit mollitia? Nam, perferendis ipsam!</p>
    <p>Eos ipsum ea sit doloremque ullam odio molestias natus adipisci, mollitia, magnam, tempore eveniet qui expedita! Eligendi, error eum quod cumque qui aliquam. Aspernatur tempore, minima at placeat, odio sapiente corrupti temporibus provident dicta aliquid totam quam nesciunt saepe. Doloribus odit fugiat nihil provident, voluptatem quasi in? Fugiat debitis fuga voluptatem! Quae deserunt iusto enim, nobis ea debitis minus iste dolor eos ducimus repellendus fuga sunt qui repellat a! Ad voluptatibus id labore fugiat? Id illo quod veritatis numquam magnam ipsa modi ea ut commodi. Corporis illum error sequi dolor, sint modi distinctio! Vitae iusto possimus molestiae ut maxime animi!</p>
    <p>Aspernatur, ullam recusandae quos mollitia labore quia eius omnis a laborum libero delectus illum neque id praesentium natus officiis consequatur asperiores! Sapiente molestias repellendus eius ducimus porro fuga, tenetur amet laborum atque! Dolorem aperiam sit eum sapiente, ducimus incidunt animi deleniti? Nemo sed nam eligendi perspiciatis rem culpa exercitationem ea est odio, voluptatem id quas. Quidem tempore dolor, quisquam maxime, rerum eum possimus explicabo, delectus quos quam fugit mollitia. Fugit blanditiis cum earum eius ab accusamus suscipit delectus aperiam error voluptatem maxime labore consequuntur voluptatum molestiae, debitis vero optio cumque obcaecati. Deserunt non officiis, excepturi voluptatibus ad beatae tenetur quaerat?</p>
    <p>Suscipit quas voluptatem quaerat, porro dolores corrupti nulla, esse pariatur laboriosam ab qui, excepturi hic minus facere reiciendis animi. Ratione libero provident nostrum rerum explicabo illo nam alias, amet, sunt, eaque voluptate voluptatum iusto corporis error facere nihil quaerat. Amet, quae ut et ratione autem, architecto laborum esse necessitatibus modi aliquam, ipsa beatae cum harum non. Cum, accusamus molestias fuga molestiae eveniet, rerum provident dicta nulla quis quas aut esse laudantium quisquam, totam expedita? Commodi quas quae iure, sint illum voluptates voluptatum magni iste aut eveniet velit ipsam corrupti quod perferendis! Ullam dolor quo saepe obcaecati voluptatum dolore, blanditiis molestias.</p>
    <p>Asperiores, suscipit quia autem omnis explicabo possimus eos voluptatum soluta a dolor enim laudantium. Vel eum recusandae modi accusantium et sapiente, iusto repellat eveniet maiores illo porro fugit suscipit numquam. Animi aliquid quod earum voluptas, qui dolore libero dicta expedita quas suscipit veritatis, quam incidunt voluptatum laboriosam sint! Magnam aperiam suscipit eveniet unde sit hic maiores saepe tempore ipsam velit nemo, mollitia, officiis placeat! Iure animi quasi, aperiam perspiciatis reprehenderit aliquid repellendus voluptatem minima ipsum, doloribus tenetur! Beatae, pariatur. Vero possimus facilis veritatis error esse minus amet porro velit ratione ullam? Id saepe quos libero blanditiis autem quae maxime illum.</p>
    <p>Error aperiam, quas at, non quo enim quod eum harum ab iusto eos cupiditate, delectus modi id quasi autem ex! Aspernatur, reiciendis eveniet perferendis cupiditate id pariatur ipsum culpa sunt dolores veniam natus aliquid itaque nostrum cum, voluptate sapiente, blanditiis quasi placeat optio? A aspernatur maxime ab et, eius nobis nemo praesentium ut animi labore, excepturi consequatur culpa minima, fuga quo laudantium illo ipsam veritatis itaque? At accusamus ea possimus error commodi, maxime ab ipsam molestias quas cumque nam? Autem at incidunt perspiciatis iure est sit temporibus maxime blanditiis provident, quidem placeat quaerat enim eum possimus saepe nihil expedita repudiandae?</p>
    <p>Ipsam laboriosam ipsa dicta placeat, facere delectus dolores autem consequuntur, mollitia iusto iste aperiam alias, a pariatur id suscipit architecto non! Eius ex cumque voluptas eum minus, doloribus voluptatibus ipsam odit officia adipisci commodi, laboriosam modi eaque nisi consectetur ratione aliquam neque. Dolorem placeat perferendis nesciunt laborum praesentium facere inventore nemo atque mollitia quod, voluptas numquam modi, minus accusamus eveniet laudantium saepe aliquam dolorum fuga? Reiciendis, autem? Recusandae accusamus dignissimos, aperiam fugit magni harum! Exercitationem doloremque architecto voluptate illo laudantium, maxime eos aspernatur iusto accusantium fugit voluptatem quaerat laborum aperiam? Officiis ipsam aliquid natus impedit? Quisquam molestiae saepe minus ea.</p>
    <p>Natus neque rem dignissimos consequuntur adipisci repellat accusamus minus repudiandae expedita exercitationem maxime qui quas explicabo, maiores optio itaque suscipit quam repellendus? Debitis sed reprehenderit dicta sint ipsam quae, magnam ea corrupti adipisci enim iste quidem laborum ad quaerat modi fugiat placeat amet repudiandae saepe quia odit impedit error nulla numquam! Nostrum, voluptatibus. Provident odit rem quos voluptatem aperiam labore qui tempore recusandae similique cupiditate amet ipsa consequatur libero commodi delectus error veniam, velit fugit. Sapiente illum sed ad dolores. Molestiae vero pariatur soluta voluptatum voluptate unde quibusdam, labore tempora nisi deleniti animi non cupiditate tempore doloremque. Adipisci, doloribus distinctio?</p>
    <p>Quae, exercitationem. Incidunt blanditiis perspiciatis dolorum architecto voluptate voluptas fuga, quisquam ullam eum modi quibusdam excepturi dignissimos assumenda vel earum aperiam exercitationem quidem mollitia rem facere. Fuga cupiditate recusandae aliquid mollitia magni facere harum! Explicabo molestiae consequatur maiores quod facilis possimus officiis magnam praesentium, harum obcaecati iste recusandae dolores a expedita iure. Nesciunt, ut autem alias praesentium voluptates temporibus deleniti laborum illo saepe tempore rerum aut, odio minus aliquid. Cupiditate assumenda dolores recusandae veniam totam illo fuga nesciunt esse hic perferendis incidunt nihil optio, ad iusto vitae ducimus consequuntur ab est sequi natus autem earum mollitia omnis temporibus. Nulla, laboriosam.</p>
  </div>
!

CSS 

              
                * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* html {
  scroll-behavior: smooth;
} */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  background-color: #fff;
  color: #333;
}
.container {
  padding: 20px 150px;
}
h1 {
  font-size: 32px;
  margin: 20px 0;
}
h2 {
  font-size: 26px;
}
hr {
	margin: 40px 0;
}
p {
  margin-bottom: 30px;
  line-height: 1.4em;
  text-align: justify;
}
#back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 26px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  outline: none;
  border: 3px solid #333;
  border-radius: 50%;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-property: background-color, color;
}
#back-to-top-btn:hover, #back-to-top-btn:focus {
  background-color: #333;
  color: #fff;  
}

@media(max-width: 992px) {
  .container { padding: 20px 100px; }
  #back-to-top-btn { font-size: 22px; width: 40px; height: 40px; bottom: 15px; right: 15px; }
}
@media(max-width:768px) {
  body { font-size: 16px; }
  .container { padding: 10px 50px; }
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  hr { margin: 30px 0; }
  #back-to-top-btn { font-size: 18px; width: 32px; height: 32px; bottom: 6px; right: 6px; }
}

/* Animations */
.btnEntrance {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}
/* zoomIn */
/* @keyframes btnEntrance { 
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }    
} */

/* fadeInUp */
@keyframes btnEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btnExit {
  animation-duration: 0.25s;
  animation-fill-mode: both;  
  animation-name: btnExit;
}
/* zoomOut */
/* @keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
} */

/* fadeOutDown */
@keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
!

JS 

              
                const backToTopButton = document.querySelector("#back-to-top-btn");

window.addEventListener("scroll", scrollFunction);

function scrollFunction() {
  if (window.pageYOffset > 300) { // Show backToTopButton
    if(!backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnExit");
      backToTopButton.classList.add("btnEntrance");
      backToTopButton.style.display = "block";
    }
  }
  else { // Hide backToTopButton
    if(backToTopButton.classList.contains("btnEntrance")) {
      backToTopButton.classList.remove("btnEntrance");
      backToTopButton.classList.add("btnExit");
      setTimeout(function() {
        backToTopButton.style.display = "none";
      }, 250);
    }
  }
}

backToTopButton.addEventListener("click", smoothScrollBackToTop);

// function backToTop() {
//   window.scrollTo(0, 0);
// }

function smoothScrollBackToTop() {
  const targetPosition = 0;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 750;
  let start = null;
  
  window.requestAnimationFrame(step);

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
    if (progress < duration) window.requestAnimationFrame(step);
  }
}

function easeInOutCubic(t, b, c, d) {
	t /= d/2;
	if (t < 1) return c/2*t*t*t + b;
	t -= 2;
	return c/2*(t*t*t + 2) + b;
};
!
999px

Console