cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <a href="#" class="scroll-top" title="Ir arriba">
    <i class="fa fa-angle-up"></i>
</a>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur ligula non augue molestie laoreet. Vestibulum dignissim iaculis eros sed varius. Nam mauris odio, aliquam ac nisi id, luctus ultricies nulla. Sed pellentesque dapibus tortor et scelerisque. Mauris malesuada id augue at suscipit. Nullam congue, erat ac ultricies rhoncus, leo neque ornare massa, in iaculis nunc nisi a mi. Aenean quis ligula a nunc finibus porta. Aliquam quis sapien dignissim, lacinia velit at, hendrerit eros. Fusce vehicula ligula vitae magna pulvinar tristique.
</p>
<p>
    Etiam vitae leo cursus, varius risus at, maximus dolor. Nunc quis auctor sem. Cras odio elit, vulputate sit amet posuere ut, tempus et odio. Nulla pretium mauris a velit pretium mattis. Cras aliquam condimentum purus. Etiam sed eleifend felis. Morbi et porta turpis, sit amet accumsan tellus. Proin laoreet rutrum mollis. Etiam et dui ut est feugiat tincidunt.
</p>
<p>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin massa metus, pharetra suscipit arcu nec, sollicitudin rutrum enim. Donec tincidunt accumsan leo, sit amet posuere magna aliquam in. Nunc sed magna ut odio mollis pellentesque. Aliquam aliquet tellus vel iaculis ultrices. Nullam ut semper elit, sit amet lobortis neque. Quisque eleifend et metus a gravida.
</p>
<p>
    Pellentesque nec tempus sapien, id molestie ipsum. Integer ullamcorper mauris sed metus semper volutpat. Duis at nisl eget arcu scelerisque pellentesque. Sed id varius ipsum, eu ultricies urna. Nulla vehicula turpis non laoreet scelerisque. Nam lacinia in ligula a mattis. Vivamus eu mattis nisl. Mauris commodo odio ex, at dictum magna iaculis vel. Maecenas gravida eleifend metus vehicula vulputate. Aenean eu eros quam.
</p>
<p>
    Donec ornare aliquet vestibulum. Duis vel feugiat justo. Morbi congue libero ut urna fringilla, non sagittis leo mattis. Quisque nec venenatis ipsum. Vivamus et dui et ipsum tincidunt efficitur quis quis velit. Quisque iaculis vehicula pulvinar. Nunc sagittis sem ut urna aliquet eleifend. Curabitur rhoncus dui sit amet lacus ultrices, ac dictum turpis ullamcorper. Nunc non ipsum et enim sodales lobortis sit amet vel odio. Fusce vel nisl orci. Mauris interdum sapien at bibendum egestas. Aliquam eu commodo dui. Aenean et quam at augue rutrum hendrerit nec quis diam.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur ligula non augue molestie laoreet. Vestibulum dignissim iaculis eros sed varius. Nam mauris odio, aliquam ac nisi id, luctus ultricies nulla. Sed pellentesque dapibus tortor et scelerisque. Mauris malesuada id augue at suscipit. Nullam congue, erat ac ultricies rhoncus, leo neque ornare massa, in iaculis nunc nisi a mi. Aenean quis ligula a nunc finibus porta. Aliquam quis sapien dignissim, lacinia velit at, hendrerit eros. Fusce vehicula ligula vitae magna pulvinar tristique.
</p>
<p>
    Etiam vitae leo cursus, varius risus at, maximus dolor. Nunc quis auctor sem. Cras odio elit, vulputate sit amet posuere ut, tempus et odio. Nulla pretium mauris a velit pretium mattis. Cras aliquam condimentum purus. Etiam sed eleifend felis. Morbi et porta turpis, sit amet accumsan tellus. Proin laoreet rutrum mollis. Etiam et dui ut est feugiat tincidunt.
</p>
<p>
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin massa metus, pharetra suscipit arcu nec, sollicitudin rutrum enim. Donec tincidunt accumsan leo, sit amet posuere magna aliquam in. Nunc sed magna ut odio mollis pellentesque. Aliquam aliquet tellus vel iaculis ultrices. Nullam ut semper elit, sit amet lobortis neque. Quisque eleifend et metus a gravida.
</p>
<p>
    Pellentesque nec tempus sapien, id molestie ipsum. Integer ullamcorper mauris sed metus semper volutpat. Duis at nisl eget arcu scelerisque pellentesque. Sed id varius ipsum, eu ultricies urna. Nulla vehicula turpis non laoreet scelerisque. Nam lacinia in ligula a mattis. Vivamus eu mattis nisl. Mauris commodo odio ex, at dictum magna iaculis vel. Maecenas gravida eleifend metus vehicula vulputate. Aenean eu eros quam.
</p>
<p>
    Donec ornare aliquet vestibulum. Duis vel feugiat justo. Morbi congue libero ut urna fringilla, non sagittis leo mattis. Quisque nec venenatis ipsum. Vivamus et dui et ipsum tincidunt efficitur quis quis velit. Quisque iaculis vehicula pulvinar. Nunc sagittis sem ut urna aliquet eleifend. Curabitur rhoncus dui sit amet lacus ultrices, ac dictum turpis ullamcorper. Nunc non ipsum et enim sodales lobortis sit amet vel odio. Fusce vel nisl orci. Mauris interdum sapien at bibendum egestas. Aliquam eu commodo dui. Aenean et quam at augue rutrum hendrerit nec quis diam.
</p>
            
          
!
            
              a.scroll-top {
	color: #fff;
	display: none;
	width: 30px;
	height: 30px;
	position: fixed;
	z-index: 1000;
	bottom: 50px;
	right: 30px;
	font-size: 20px;
	background: #222;
	border-radius: 3px !important;
	text-align: center;
	border: 1px solid hsla(0, 0%, 78%, 0.3)
}
a.scroll-top i {
	position: relative;
	top: 2px;
}
            
          
!
            
              $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('a.scroll-top').fadeIn('slow');

    } else {
        $('a.scroll-top').fadeOut('slow');
    }
});

$('a.scroll-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 600);
});
            
          
!
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.
Loading ..................

Console