Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

+ add another resource

JavaScript

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.

+ 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.

Behavior

Save Automatically?

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