Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <!--GoTop group-->
  <a href="javascript:;" id="go-top" class="go-top fade">
    <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-arrow-up fa-stack-1x fa-inverse"></i>
    </span>
  </a>
  <!--dummy content to make page long enough-->
  <div class="page-header">
    <h2>Go Top icon</h2>
  </div>
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i> Scroll down and look at bottom right, please.<br>Fade FX based on Bootstrap classes only.
  </div>
  <div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus purus eros, aliquet eu turpis sit amet, vestibulum pellentesque libero. Curabitur faucibus massa malesuada condimentum mollis. Nulla quis magna et felis bibendum tincidunt vitae vehicula purus. Mauris mollis vitae tortor in posuere. Nulla quis aliquet erat. Sed elementum aliquet justo nec porttitor. Sed maximus iaculis purus, id pretium sapien venenatis eu. Fusce maximus maximus nunc, et tempus felis molestie a. Fusce porttitor posuere erat vel convallis. Ut hendrerit imperdiet purus, vel convallis neque sagittis vitae. Curabitur a orci vel tellus cursus ullamcorper.</p>
  <p>Nam viverra fermentum mi eget luctus. Sed a iaculis leo, id pharetra neque. Donec vel purus a nunc hendrerit porttitor. Integer posuere tristique turpis ut porta. Nunc sit amet tincidunt turpis, a aliquam risus. Nam ex diam, vulputate non suscipit ac, eleifend nec turpis. Duis at ante eu diam tempus sagittis. Curabitur posuere a nisl sed sollicitudin. Maecenas suscipit quam eros. Vestibulum faucibus eget nibh quis ultricies. Duis auctor dui nulla, at elementum mauris malesuada id. Fusce lacus neque, sagittis at eros quis, ultrices dapibus odio.</p>
  <p>Morbi lacus dolor, ullamcorper non volutpat in, ultricies eu lacus. Suspendisse ac euismod nisl, in iaculis ante. Aenean vitae justo in justo pellentesque elementum. Sed convallis, urna sed auctor scelerisque, lectus enim iaculis lorem, a pulvinar tellus lectus non felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse massa nunc, pharetra vitae quam quis, dictum finibus diam. Pellentesque ac risus facilisis, consequat felis ut, tincidunt leo. Phasellus felis sapien, consectetur a elit a, blandit tincidunt sem. Cras et erat sed nisi malesuada tempor in sed nulla. Nullam pharetra gravida nulla, eu aliquet elit ullamcorper eu.</p>
  <p>Phasellus convallis aliquet libero eget lacinia. Vestibulum in vestibulum massa. Pellentesque interdum et tellus nec iaculis. Vestibulum accumsan dui id metus dapibus luctus. Suspendisse ornare ante id dui malesuada aliquam. Quisque eleifend ipsum lectus, ac feugiat justo rhoncus nec. Phasellus eget pellentesque nisl. Aliquam commodo elit in suscipit commodo.</p>
  <p>Fusce non tempor massa. Aenean sit amet ex at leo gravida finibus. Morbi quis leo eget orci euismod luctus et ut nulla. In dapibus justo nulla, a suscipit metus auctor sed. Pellentesque egestas vel elit ut ultricies. Duis nibh quam, facilisis in elementum a, suscipit vitae risus. Vestibulum mattis ex et facilisis congue. Nullam quis urna eros. Sed iaculis libero a elit volutpat suscipit.</p>
  <p>Praesent sit amet diam augue. Mauris euismod ultrices arcu in convallis. Aenean justo nibh, vulputate a eros ut, mattis vestibulum massa. Sed euismod, libero quis euismod iaculis, lectus purus sagittis arcu, in convallis libero enim vitae massa. Nunc sed venenatis ipsum. Pellentesque sit amet quam eu risus varius suscipit nec in lectus. Vivamus auctor nisl quis lacinia bibendum. Quisque sagittis, erat placerat venenatis molestie, purus lorem finibus purus, quis semper mi ante eu sem. Ut nulla lectus, sagittis vitae fringilla eget, blandit ut nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor, massa lacinia porttitor pellentesque, elit orci elementum erat, lobortis fermentum tortor eros eget quam. Nullam vehicula libero vitae purus congue rhoncus. Sed hendrerit tortor non arcu accumsan malesuada. Aenean porta aliquet arcu eu pretium. Mauris magna metus, dictum lacinia tortor quis, faucibus fermentum leo.</p>
  <p>Pellentesque dictum, sem ut hendrerit vulputate, magna felis ullamcorper eros, non cursus leo urna sed sem. Sed eu metus ac massa lacinia faucibus eu eget ligula. Pellentesque posuere congue aliquam. Etiam bibendum tempor tellus, non pellentesque libero venenatis vel. Vestibulum condimentum eros est, in mattis urna eleifend nec. Pellentesque sit amet nisl consectetur, cursus massa ut, iaculis justo. Nunc semper lacinia arcu, et venenatis urna ullamcorper sit amet. Cras bibendum nunc ac dui tempor, id tincidunt mi feugiat. Integer semper odio ac enim imperdiet, nec egestas est accumsan. In maximus in felis et dapibus. Quisque velit sapien, scelerisque sit amet efficitur a, mollis sit amet purus. In tincidunt venenatis ipsum in auctor.</p>
  <p>Maecenas id ex quam. Praesent commodo sapien magna, id vestibulum diam euismod id. Mauris quis nulla sit amet leo bibendum ultrices. Integer maximus odio sit amet dolor vulputate sodales. Proin in ex et tellus suscipit sollicitudin eu a nisl. Donec eget ligula sapien. Ut laoreet aliquet convallis. Morbi rhoncus lacinia maximus. Vestibulum lacus lectus, feugiat at est non, interdum scelerisque nisi. Vivamus finibus velit pulvinar maximus fringilla. Etiam volutpat nec tortor ac laoreet. Fusce vitae gravida est, vitae blandit nibh. Fusce sit amet velit eu magna vehicula tincidunt. Integer sed faucibus tellus, quis aliquam erat. Phasellus in luctus dui.</p>
  <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mollis ante tempor venenatis consectetur. Etiam posuere, nulla ut blandit ultricies, nulla metus finibus libero, quis aliquet sapien leo vel lorem. Proin sed erat suscipit, pulvinar magna at, malesuada lacus. Donec id lorem vel lacus tempor posuere. Ut placerat magna id porta pharetra. Nam rutrum purus eu turpis venenatis dapibus. Donec facilisis enim scelerisque condimentum mattis.</p>
  <p>Vestibulum pharetra orci sed sem lacinia porttitor. In lacus libero, placerat sed tincidunt ac, bibendum imperdiet massa. Vivamus porttitor feugiat tellus eu mattis. In varius velit finibus convallis porta. Phasellus vel ultricies ligula. Quisque fermentum tellus sed libero varius, et aliquet arcu ornare. Cras vitae sagittis leo. Nullam interdum nulla enim, vel commodo nunc dapibus a. Mauris gravida, dui id interdum consectetur, elit diam condimentum sem, eget eleifend lorem tellus nec sem.</p>
  <p>Morbi dolor nunc, aliquet non tellus fringilla, sagittis luctus ligula. Sed ut purus non diam volutpat pretium. Quisque tellus tortor, bibendum eget erat et, congue consequat velit. Proin sed hendrerit nisl. Etiam vitae sagittis risus. Sed fringilla, leo blandit mollis volutpat, erat augue varius nunc, eget varius orci libero ut quam. Nullam vel lectus id massa sodales consectetur. Pellentesque eu leo eros. In pretium, ipsum vel venenatis mollis, arcu sapien pharetra orci, vitae auctor metus mi sed elit. Praesent non diam vitae sem scelerisque molestie id sit amet ante.</p>
  <p>Curabitur eget augue et ipsum malesuada rhoncus et vel ipsum. In accumsan, risus vel lobortis condimentum, orci nunc pulvinar elit, in accumsan libero risus eu ante. Nam ut mauris eget dui egestas sollicitudin. Vivamus quis laoreet nisi. Vivamus tincidunt lectus mi, eu hendrerit libero laoreet id. Vivamus luctus eu nibh eu consequat. Donec nec metus eget enim pharetra fermentum id non ipsum. Vestibulum semper tincidunt leo eget commodo. Vestibulum pulvinar nec eros in ornare. Morbi et massa massa. Proin ullamcorper, arcu vel iaculis eleifend, massa ligula ultrices nisl, eget placerat velit eros nec elit. Vestibulum fermentum odio quis sagittis commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ac urna non orci ultricies scelerisque.</p>
  <p>Sed sed euismod lacus, id condimentum libero. Donec cursus scelerisque ligula, id porta ipsum imperdiet id. Curabitur consectetur efficitur imperdiet. Ut lacinia sapien et fringilla pretium. Curabitur eu orci consequat, tempus libero eu, vestibulum dolor. Nullam eu lectus sed mi mollis venenatis. Morbi magna arcu, varius et fermentum rutrum, lacinia sit amet risus. Nulla facilisi. Ut nec libero eget lacus rhoncus bibendum sit amet ac odio. Quisque commodo varius turpis. Pellentesque sit amet ipsum in tortor porta malesuada et eget nulla. Fusce congue sapien lacus, vitae sollicitudin odio viverra non. Integer efficitur nunc vel eleifend mattis. Suspendisse fermentum, felis sit amet tristique semper, dui magna vestibulum metus, quis condimentum dolor nisl id libero. In faucibus, felis eget fermentum congue, nisi metus aliquet neque, nec hendrerit nulla quam id odio. Duis sed tortor dignissim, posuere ante id, ultrices quam.</p>
  <p>Integer vehicula enim ut ligula fringilla congue. Praesent rutrum lacus quam, vel tempus leo commodo ut. Quisque non nisi id felis imperdiet rhoncus. Phasellus facilisis nisl ac tortor maximus elementum. Ut id fringilla quam. Vivamus ac nibh vestibulum, maximus massa et, commodo tortor. Donec ut lectus vitae lorem condimentum imperdiet. Morbi ornare leo enim, non malesuada lacus faucibus laoreet. Vestibulum varius nunc nisi, id rhoncus neque efficitur vestibulum. Donec at arcu et dolor sollicitudin interdum. Praesent elit diam, accumsan et condimentum in, sollicitudin vitae erat. Etiam vitae molestie purus, vel ornare dui.</p>
  <p>Pellentesque efficitur cursus metus. Aenean scelerisque ex id mi porta, non viverra libero scelerisque. In in mi lacus. Sed non tristique lacus, vel aliquam augue. Donec placerat nisi ut aliquam ultrices. Nam sed quam eget ipsum volutpat dignissim eu a enim. Duis imperdiet velit et gravida laoreet. Quisque tempor quam non sapien lacinia, quis aliquet mauris blandit.</p>
  <p>Nunc in luctus arcu. Morbi id nisl ultrices ex condimentum aliquet. Sed a ornare elit, eu egestas lorem. Curabitur et mi ex. Cras volutpat ac lorem sit amet vehicula. Duis elit justo, accumsan sagittis aliquam et, cursus efficitur velit. Aenean congue urna ac orci pharetra varius. Fusce euismod mollis sagittis. Phasellus consectetur orci at nibh sagittis, non pulvinar sem eleifend. Donec tristique venenatis bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eu odio pellentesque ipsum tincidunt vehicula.</p>
  <p>Maecenas eget pretium purus, et interdum ante. Aliquam in nisi imperdiet, molestie enim et, ornare purus. Mauris mollis tincidunt commodo. Aenean nec facilisis neque, in suscipit libero. Fusce sed elit blandit, varius justo vitae, consequat lacus. Duis lacinia efficitur ex, vel aliquet purus sagittis quis. Nullam sagittis aliquam sem, dignissim porttitor metus pulvinar quis. Morbi a luctus massa. Maecenas malesuada nibh non mauris vestibulum ultrices.</p>
  <p>Etiam volutpat, lectus ac faucibus finibus, turpis erat pulvinar dolor, at interdum tellus lorem et quam. Nullam tempor cursus ullamcorper. Fusce feugiat tortor in nunc accumsan, quis interdum ligula posuere. In a lacinia tellus. Suspendisse ultrices erat ut erat pulvinar mattis. Mauris quis dolor id lectus sollicitudin sollicitudin gravida quis magna. Vestibulum eros urna, ultrices eget est vitae, consequat rhoncus orci. Donec luctus consequat diam, vitae maximus nunc imperdiet quis. Integer ullamcorper urna a mattis accumsan. Mauris et aliquet ex. Cras eget massa metus. Pellentesque vitae facilisis urna, vitae hendrerit metus. Phasellus aliquet nisl lacus, eget finibus ex pretium quis. Aliquam quis mauris mauris. Mauris eu sollicitudin purus.</p>
  <p>Cras eget est massa. Donec leo ex, rhoncus auctor nulla quis, aliquam consectetur metus. Quisque interdum nibh ut lorem maximus dignissim. Nulla interdum nibh vel elit consectetur, ut vulputate risus porta. Aliquam iaculis tellus ipsum, ac posuere orci bibendum id. Phasellus sed lacus quam. Sed sagittis lacus aliquet felis viverra pretium. Nullam vitae aliquam dolor. Vestibulum pretium ligula dapibus pharetra mattis. Fusce dictum turpis sit amet turpis hendrerit, at facilisis nisi mollis. Phasellus pharetra lobortis enim, vel convallis elit consequat vestibulum. Nulla placerat justo a auctor eleifend. Praesent sit amet molestie lacus. Fusce eget sem nec ipsum feugiat vestibulum. Duis tincidunt accumsan augue, sed varius mauris posuere ut.</p>
  <p>Aenean vitae elit cursus nunc accumsan blandit. Duis eget ante semper, convallis nulla placerat, ultricies magna. Pellentesque a interdum nibh. Proin commodo quam et tortor semper pretium. Donec sed suscipit nunc. Cras hendrerit porta nulla vel dictum. Sed sed consequat augue. Nam ornare vehicula tellus.</p>
</div>
            
          
!
            
              .go-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
            
          
!
            
              var el = $('#go-top');
var minScroll = 300;
        
// show/hide go-top group
$(window).scroll(function() {
  ($(this).scrollTop() >= minScroll) ? el.addClass('in') : el.removeClass('in');
});

// go top on click
el.click(function() {
  $('body, html').animate({
    scrollTop : 0 // scroll to top of body
  }, 'slow', 'easeInOutCubic', function(){
    el.blur(); // remove focus when animation ends
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console