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 

              
                <a href="#content" class="back-to-top"><span class="back-to-top-text">Top</span></a>

<!--Everything below this line is just dummy content-->

<header>
	<div class="container">
		<h1>Elegant Back to Top Button</h1>
		<p class="sub-title">Using JQuery and CSS</p>
	</div>
</header>

<main class="container">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non neque volutpat, imperdiet odio non, maximus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In et metus vitae lectus molestie suscipit. Integer mi leo, egestas vel ex ac, tincidunt gravida eros. Proin porttitor elementum neque, ut blandit est venenatis vulputate. Integer maximus ante et nisl mattis venenatis. Nulla interdum nulla vitae ipsum gravida dapibus. Donec congue urna in mauris feugiat rutrum. Morbi vitae imperdiet tellus, ut tempus nulla.</p>

	<p>Aenean velit urna, laoreet id congue nec, varius et ex. Morbi molestie dui sit amet sagittis tincidunt. Mauris id tellus nulla. Mauris viverra mauris risus, ut porttitor urna ornare vel. Sed eu efficitur risus, nec ullamcorper neque. Etiam finibus pulvinar ex non mattis. In sit amet augue metus. Etiam eget velit tortor. Mauris sit amet luctus nulla, ut vulputate erat. Aenean vestibulum leo eu metus vehicula pellentesque. Integer imperdiet ac ante quis elementum. Suspendisse potenti.</p>

	<p>Phasellus tincidunt ullamcorper ex id blandit. Proin posuere faucibus commodo. Nullam ultricies pellentesque arcu, eget sodales metus lacinia nec. Integer rhoncus lacus ac ligula aliquam vehicula bibendum pellentesque dolor. Donec ac felis sollicitudin, mollis mi a, placerat tellus. Donec tempus justo id mattis laoreet. Integer auctor tellus at dolor porttitor, eget ullamcorper nulla molestie. Nullam metus mi, dignissim eget rutrum ac, bibendum tempus libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In at auctor ex. Maecenas in commodo magna.</p>

	<p>Cras facilisis elementum elit. Nunc bibendum interdum ultricies. Vestibulum id bibendum enim. Vestibulum dui odio, faucibus nec vehicula in, vestibulum sed dui. Donec felis magna, eleifend sed tortor id, sagittis imperdiet nisl. Integer est enim, sagittis eu dignissim eget, sodales sed diam. Donec mauris nisl, rutrum vitae convallis sit amet, malesuada ac dolor. Nam efficitur risus id vestibulum pulvinar. Fusce at diam congue, dictum mi ac, luctus neque. Cras euismod ipsum a consequat tempus. Fusce tincidunt, elit sed rutrum ornare, libero justo rhoncus lacus, ut vestibulum risus orci quis ipsum. Morbi elementum vehicula convallis. Curabitur egestas, lorem sed cursus rutrum, massa est aliquet lorem, quis consequat erat nisl in ligula. Aenean nec congue leo. Curabitur varius nec ipsum rutrum vulputate.</p>

	<p>Sed efficitur tortor sit amet porta hendrerit. Quisque tincidunt quam a neque volutpat laoreet. Sed aliquam sapien ut justo tempus rutrum. Etiam eu ipsum a sapien scelerisque tincidunt. Nulla facilisi. Vivamus at metus facilisis, malesuada purus nec, vestibulum dui. Nulla quis elit quis turpis convallis lacinia dictum eget tortor.</p>

	<p>Donec sed malesuada nibh. Curabitur porttitor orci erat, non maximus urna suscipit a. Donec maximus laoreet lobortis. Fusce sit amet erat id urna tincidunt scelerisque. Vivamus pellentesque dolor libero, sit amet tincidunt dui porttitor eget. Donec consectetur lorem nunc, nec venenatis nunc egestas non. Nunc pulvinar volutpat ante quis malesuada. Integer ut felis porttitor, eleifend massa malesuada, pulvinar risus. Suspendisse potenti. Phasellus bibendum id ligula blandit porta. Curabitur congue leo nisi, eget condimentum mauris rhoncus eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse tincidunt enim sed ultricies varius.</p>

	<p>Nulla vel neque porttitor, auctor nibh ut, tincidunt est. Praesent cursus fermentum orci fermentum scelerisque. Ut lacus lacus, ultricies sit amet congue pharetra, pulvinar in magna. Duis molestie sit amet nibh quis elementum. Proin rhoncus, lorem eget blandit pulvinar, magna elit mattis sapien, et egestas nisi neque ac massa. Nunc metus massa, facilisis id hendrerit quis, cursus vel nibh. Aliquam eu quam dignissim, lobortis justo at, suscipit elit. Cras hendrerit tempus velit, non luctus massa mollis scelerisque.</p>

	<p>Aliquam at sapien et ipsum feugiat tincidunt. Integer bibendum, risus at sollicitudin mattis, magna eros rutrum urna, at volutpat dolor eros et neque. Nunc vehicula libero quis felis condimentum, faucibus posuere justo feugiat. Morbi luctus viverra nisl, tristique scelerisque tortor vehicula ac. Donec laoreet nibh eu lectus blandit dapibus. Quisque non odio feugiat metus pulvinar dapibus et vel quam. Etiam ac volutpat quam, at sodales nunc. Phasellus sagittis ante a nulla condimentum, a vestibulum odio mattis. Sed pretium, magna sit amet ullamcorper viverra, ex tortor facilisis tellus, at porttitor purus augue nec mauris. Suspendisse luctus ex vitae leo pretium sodales.</p>

	<p>Proin dapibus pharetra est ac placerat. Pellentesque tempor ipsum vitae est tempor efficitur. Nulla nec porta augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis velit neque, ornare dictum pellentesque sed, elementum sed purus. Mauris id velit vitae libero scelerisque aliquam sit amet nec sapien. Nulla ornare quis ipsum ac ullamcorper. Phasellus dapibus faucibus nisi, eu consequat lorem vulputate non. Maecenas vitae fringilla nisi. Quisque condimentum pharetra ex et porta. Phasellus sapien sem, mattis non lacus nec, dapibus dignissim erat. Etiam placerat massa eget tortor convallis sagittis.</p>

	<p>Nunc iaculis velit at luctus blandit. Cras lobortis, orci a facilisis fringilla, dui est placerat eros, tempor luctus orci velit ut mauris. Mauris tempor elit at ante accumsan consectetur. Etiam pretium quam eu lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id massa ut tellus luctus dapibus non quis arcu. Vivamus in gravida arcu, non rhoncus augue. Integer tristique velit non augue blandit, id ornare ligula bibendum. Aenean in ante sollicitudin, euismod nunc ac, maximus tortor. Etiam vitae auctor nisl. Ut dapibus vehicula tempor. Ut ultrices egestas commodo. Donec nec enim ac ipsum fringilla malesuada. Mauris eleifend ultricies felis.</p>

	<p>Mauris et urna vel eros consectetur porttitor. Cras accumsan risus et lorem convallis finibus. Donec lacinia turpis sit amet facilisis dapibus. Nulla molestie elit quis justo lobortis euismod. Donec feugiat, quam et congue efficitur, dui ligula hendrerit ante, id rhoncus tellus eros ac nunc. Sed pulvinar metus et dolor rutrum, et sodales dolor vehicula. Pellentesque vel euismod purus, non cursus massa. Aenean auctor nibh id lectus pulvinar, eu lobortis nulla sodales. Proin sodales lacus quis magna scelerisque, eget blandit eros imperdiet.</p>

	<p>Praesent ornare sit amet tellus ac sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus nunc nibh, id ultricies ligula dictum eget. Phasellus mollis erat a est consequat lacinia a vel ex. Etiam fermentum scelerisque neque at consectetur. Nunc id urna ac augue condimentum pharetra in non risus. Curabitur eget eros leo. Fusce sodales sem sed rutrum vehicula. Vivamus rhoncus nisl sit amet tellus ultrices, id egestas lectus imperdiet. Aliquam suscipit tristique erat nec maximus.</p>

	<p>Sed eu lacinia ante. Donec iaculis dui nec consectetur ornare. In consectetur fermentum augue vel varius. Curabitur id turpis eget ante aliquet molestie. Cras vitae ipsum tincidunt, mollis nisl quis, porttitor nibh. Phasellus eu ultricies quam. In ut lacus pharetra, euismod ex ac, iaculis diam. Duis eleifend urna mauris. Aenean a odio eget massa condimentum blandit id at ligula. Maecenas gravida eros nec leo bibendum aliquam eget eget nisl. Morbi mattis sollicitudin magna, at finibus erat pharetra quis. Vestibulum vel elit tincidunt, sagittis ligula vel, rhoncus arcu. Maecenas accumsan elit erat, eget tempor sapien facilisis vel.</p>

	<p>Pellentesque vitae sapien sodales, tempor ante lacinia, sollicitudin arcu. Fusce eget elit non lacus lacinia mattis vel eget est. Praesent vitae accumsan leo. Proin vitae porta sapien. Etiam placerat sem felis, venenatis vehicula nunc ultricies at. Fusce at mauris dignissim, hendrerit lectus quis, dignissim nulla. Etiam hendrerit eget augue eu convallis. Fusce commodo sem vitae nunc pellentesque, id consectetur felis tempus. Duis tincidunt arcu eu porta vestibulum. Morbi vitae lacus ac lacus faucibus eleifend. Phasellus et justo ac nulla interdum consectetur vel ut massa.</p>

	<p>Nunc vitae lectus in leo tempus finibus. Nam dignissim orci ac nibh ullamcorper venenatis. Etiam sodales tristique mi at aliquet. In at augue suscipit, tempor mi sed, efficitur neque. Integer consectetur turpis tincidunt, mollis mauris et, mollis arcu. Donec elementum, lectus et imperdiet scelerisque, nisi enim egestas orci, eu pharetra nunc massa eu nulla. Fusce elementum tortor magna, vitae viverra arcu lobortis non. Maecenas finibus ex ac maximus rhoncus. Nullam porttitor bibendum massa, eu mattis ligula ultrices eget. Etiam quis lectus sit amet ligula aliquet lobortis. Quisque lobortis sed enim non porttitor. Suspendisse potenti.</p>

	<p>Nam pretium lacinia orci, a interdum orci lacinia in. Sed viverra tempus urna vitae ornare. Aliquam tristique, augue ac semper tempor, nulla augue sollicitudin sem, sit amet placerat lectus magna sit amet arcu. Donec bibendum odio id enim accumsan, sit amet auctor augue tristique. Curabitur ultricies, metus ac fringilla volutpat, velit ligula vulputate dolor, vitae cursus metus orci non arcu. Vestibulum ultrices dui lacus, eget consectetur erat vehicula eget. In mattis, nunc sit amet laoreet posuere, tortor ante sodales ipsum, hendrerit sodales massa elit et ligula. Integer eget suscipit dolor. Vestibulum in quam urna. Donec sodales mattis est, vitae rutrum quam rutrum vitae. Aliquam et posuere risus, vitae imperdiet nisl. Suspendisse sed metus mi. Proin condimentum nunc vel mauris dapibus egestas.</p>

	<p>Fusce nec nisi pretium, consectetur risus ac, vestibulum odio. Curabitur placerat sagittis pretium. In hac habitasse platea dictumst. Vestibulum semper ut neque ultrices suscipit. Fusce vestibulum lacinia hendrerit. Nulla risus mauris, lacinia id mattis feugiat, varius et sapien. Sed vestibulum dui sed erat tristique, vitae mollis eros tincidunt.</p>

	<p>Nulla risus dui, rutrum vitae elit et, pretium convallis ante. Cras vulputate venenatis mi a cursus. Pellentesque metus metus, porttitor sollicitudin imperdiet eu, aliquet quis ligula. Quisque auctor, lectus gravida aliquam imperdiet, diam risus tincidunt lacus, sit amet viverra lorem odio a nulla. Morbi eget ligula hendrerit, ultricies magna nec, scelerisque purus. Maecenas cursus justo urna. Sed posuere ante quis arcu volutpat pretium. Pellentesque aliquam ultricies feugiat. Donec condimentum viverra dolor, sit amet aliquet mi cursus non. Integer vel luctus velit. Aliquam pellentesque sit amet mi sed convallis. Sed felis nulla, porttitor sed tincidunt ut, lobortis at lectus. Nullam volutpat ac tortor sit amet lobortis. Nunc ac libero nec risus interdum dapibus nec eget purus.</p>

	<p>Vestibulum ultricies varius risus et lacinia. Cras congue elit ex, eget ullamcorper leo dapibus nec. Donec eu nunc sodales, aliquet nunc quis, consequat tortor. Fusce imperdiet nisl vitae elit pretium egestas. Nunc blandit ante orci, nec vestibulum tortor varius vitae. Donec luctus mi elit, in sodales ex tincidunt eu. Proin nec orci eu turpis dictum consequat.</p>

	<p>Donec scelerisque scelerisque orci et feugiat. Nullam eget felis nec lorem aliquet blandit ut non nunc. Vivamus ipsum leo, feugiat et augue vel, dictum accumsan lacus. Nunc rutrum risus vel tristique tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi dictum euismod ligula, vitae placerat augue euismod at. Fusce felis ipsum, euismod id vestibulum vel, volutpat sit amet libero. Nulla et pharetra enim. Pellentesque ultricies volutpat ante, eget imperdiet libero consectetur ut. Ut vel iaculis tellus. Nulla luctus commodo nibh, eget dapibus justo posuere id. Nam sed purus arcu. Integer commodo eu odio in malesuada. Sed porttitor urna eu purus sodales, venenatis posuere enim pellentesque. Proin faucibus, lorem at bibendum tempus, augue massa varius ipsum, at efficitur massa magna non risus.</p>
</main>
!

CSS 

              
                .back-to-top,
.back-to-top::after,
.back-to-top-text {
	transition: all 0.25s ease-in-out;
}

.back-to-top,
.back-to-top::after {
	position: fixed;
	height: 45px;
	width: 45px;
	color: #262728;
	opacity: 0.75;
	padding: 3px 5px;
	font-size: 12px;
	font-weight: bold;
	border: 1px solid #262728;
}

.back-to-top {
	right: 1.5%;
	bottom: -12%;
	z-index: 3;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transform: rotate(-45deg);
	background: #fff;
}

.back-to-top::after {
	display: inline-block;
	content: "";
	right:  -1px;
	bottom: 0;
	border-width: 1px;
	background: transparent;
}

.back-to-top-text {
	display: block;
	transform: rotate(45deg) translate(25%,75%);
}

.back-to-top:hover,
.back-to-top:focus,
.back-to-top:hover::after,
.back-to-top:focus::after,
.back-to-top:hover .back-to-top-text,
.back-to-top:focus .back-to-top-text {
	opacity: 1;
}

.back-to-top:hover::after,
.back-to-top:focus::after {
	transform: translate(25%,-25%);
}

.back-to-top:hover .back-to-top-text,
.back-to-top:focus .back-to-top-text {
	transform: rotate(45deg) translate(25%,0);
}

.show-back-to-top {
	bottom: 4%;
}

/* Basic styles below this line. */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
	color: #262728;
	background: #e5e4e2;
	font-size: 1.4em;
	font-family: 'Source Sans Pro', sans-serif;
}

header {
	padding: 1px;
	margin-bottom: 1.5em;
	font-family: 'Playfair Display', serif;
	background: #fff;
}

.container {
	margin: 0 auto;
	width: 760px;
	max-width: 90%;
}
!

JS 

              
                // Check distance to top and display back-to-top.
$( window ).scroll( function() {
	if ( $( this ).scrollTop() > 800 ) {
		$( '.back-to-top' ).addClass( 'show-back-to-top' );
	} else {
		$( '.back-to-top' ).removeClass( 'show-back-to-top' );
	}
});

// Click event to scroll to top.
$( '.back-to-top' ).click( function() {
	$( 'html, body' ).animate( { scrollTop : 0 }, 800 );
	return false;
});
!
999px

Console