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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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

Console