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 

              
                <div id="section-1">
<h2>CSS Smooth Scrolling</h2>
<a href="#section-2">Go to section 2<a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla maxime hic veritatis consectetur totam ut qui repellat, nostrum molestiae recusandae, cupiditate et aspernatur, sapiente itaque doloribus enim. Dolor, veritatis quasi! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid odit impedit ea sit culpa. Voluptates, tempore? Dolore quidem, dolorum enim maxime distinctio doloribus quisquam, nisi provident, id dolores nulla! Ullam.
Impedit repellat a error ad vitae at, blanditiis facere, suscipit dolore, omnis veniam repellendus! Asperiores dolorum dignissimos dolorem quasi iure, commodi vel inventore! Minus perspiciatis quidem architecto ducimus animi! Perferendis!
Consequuntur dicta aperiam aspernatur exercitationem nisi laboriosam ut! Harum voluptatibus velit, aliquid delectus saepe fugit cum adipisci cumque quae expedita, et explicabo perspiciatis praesentium similique earum odit consequatur magni debitis?
Doloribus voluptates voluptatibus fugit voluptatem? Molestiae amet totam enim accusantium laudantium possimus expedita dolores ad placeat, voluptatem vitae hic id illo omnis, ipsum eveniet et eligendi adipisci! Ullam, voluptatum atque!
Eos, tenetur unde! Aspernatur illo minima iste aliquid provident suscipit minus est. Facilis quo consequatur accusantium suscipit saepe ex autem odio natus impedit incidunt eius, delectus, doloremque praesentium sequi temporibus.
Voluptate dicta, quis ea unde, harum omnis reiciendis beatae architecto fuga a laboriosam dignissimos consequatur possimus, impedit at amet minima quo quam reprehenderit tempore enim excepturi. Fuga temporibus porro officiis!
Ad suscipit deserunt voluptates a officiis quae beatae eos, eveniet voluptate sequi temporibus iusto. Rerum, iusto reprehenderit accusantium quibusdam laborum officia error autem sapiente nostrum ad! Atque suscipit nulla illo.
Quis, quae optio ad possimus aliquam quia aut ab debitis nesciunt quasi ipsum exercitationem, excepturi recusandae? Necessitatibus, commodi. Sint minima harum, quo non voluptatum quam quia architecto perspiciatis reiciendis voluptatibus!
Itaque, enim accusamus aspernatur amet laudantium quaerat nulla officiis consequatur a, voluptatibus ea eius quasi vel in praesentium ullam assumenda dolore! At explicabo unde minima officiis quod fuga cum aperiam.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex minus ducimus temporibus illum ipsam at consequatur? Cumque expedita corrupti dicta, sed suscipit mollitia eos eum ipsum obcaecati. Eum, ducimus cumque.
Provident tenetur nesciunt deserunt labore? Sapiente commodi dolores incidunt ea totam laudantium illum, sunt dolore itaque quos distinctio officiis delectus natus dignissimos accusamus quod velit saepe, architecto in qui ab.
Enim velit laborum sequi voluptatem! Deserunt facilis pariatur delectus maxime id repudiandae fugit, sunt atque quaerat, in mollitia quasi libero praesentium! Minus et architecto ea quae laboriosam laudantium perferendis eos.
Commodi cumque dignissimos nulla veniam cupiditate alias, neque dolorum rem. Porro magni nesciunt asperiores expedita voluptatum laboriosam, quasi corporis iure autem? Consequatur cupiditate officiis nostrum commodi culpa dolore doloribus facere?
Distinctio, praesentium dolores amet eius dolor illum iusto harum fuga delectus hic sit itaque doloremque ut! Reiciendis voluptatum a facilis non corrupti fuga alias, velit incidunt esse exercitationem eaque ipsa?
Corporis doloremque saepe quos deleniti, odio ipsum eaque pariatur dolor quaerat repellat a? Officia nostrum magnam magni iure doloribus a deleniti, beatae voluptas possimus temporibus praesentium reprehenderit nesciunt voluptate asperiores.
Officiis vitae totam autem rerum hic harum optio ad quia amet ratione inventore eos, pariatur dolorem expedita? Aspernatur quidem non, accusantium rem eos libero modi voluptatibus, fugit a qui doloribus?
Ducimus quibusdam temporibus molestiae voluptas fugit vel cum beatae magni mollitia, rem, ratione velit dolorum consectetur asperiores aperiam eaque qui inventore laboriosam dolore saepe doloremque, rerum harum quod consequuntur. Impedit.
Iusto dolorum officia consequuntur eos sunt ratione vitae quia, sed fuga, earum aliquam placeat, perspiciatis itaque. Aspernatur, quibusdam nisi deleniti id sapiente ex natus exercitationem recusandae sequi ullam. Perferendis, hic?
Et, exercitationem itaque quaerat quod a facilis inventore unde! Unde beatae, aliquam sint amet eos placeat hic quibusdam aliquid! Molestiae eum alias magnam vel corporis incidunt dolor, officia explicabo reprehenderit!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum, distinctio illo debitis cupiditate corrupti inventore, in quaerat, asperiores quo saepe facilis. Asperiores quo tempora sapiente officiis iure. Ratione, commodi itaque!
Cupiditate commodi earum, ullam harum dolor impedit beatae enim pariatur debitis, corporis soluta quasi modi quae ex, autem eum nisi veritatis et? Sunt atque architecto recusandae exercitationem nobis magnam obcaecati.
Perspiciatis sit modi magni amet a odit excepturi architecto temporibus id blanditiis, vero aspernatur recusandae eum, libero porro aperiam quisquam dolor? Deserunt consequatur corporis nesciunt recusandae fuga sint ea sequi.
Sequi quis architecto quos nulla numquam cumque voluptas consectetur. Pariatur ullam quos perferendis quibusdam culpa laboriosam optio quaerat ut harum beatae nostrum placeat natus quisquam, rem labore. Praesentium, ipsam sint.
Qui dolor, eius totam eligendi, nihil ducimus, nisi vero obcaecati quibusdam nostrum ipsum provident. Sit consectetur, et soluta ipsa corporis dignissimos aperiam, nesciunt, ipsum nihil est harum. Accusamus, reprehenderit facilis.
Vero nesciunt dicta ullam. Quas, eligendi optio? Nihil nam, quo natus illo perspiciatis earum laudantium quibusdam expedita atque aut qui placeat non ex voluptatum praesentium, beatae architecto? Quam, commodi non.
Quia modi cumque vel eius reiciendis! Accusantium necessitatibus qui maiores, atque obcaecati corrupti suscipit culpa temporibus tempora. Similique accusantium dolor nulla, debitis nobis asperiores eligendi suscipit, ab veniam laborum explicabo?
Exercitationem, officiis assumenda quod natus delectus eveniet earum, repudiandae sit ratione placeat sapiente at iure quam enim! Incidunt nisi deserunt rerum! Sunt quos placeat quasi quae, quia aut a ad?
Pariatur, officia cum, accusantium corrupti voluptatibus ea perspiciatis magnam ipsa, distinctio modi architecto corporis? Repudiandae natus perferendis, ducimus dignissimos iure tempore nemo rem repellendus maxime, impedit fugiat, autem sit explicabo.
Incidunt fuga a quae quas. Deserunt necessitatibus ipsam delectus itaque ad exercitationem? Amet voluptatum fugit nam aspernatur dolorem voluptate ipsa, sequi commodi blanditiis unde rem veniam dolore accusamus ducimus est.
Est, odio. Dignissimos exercitationem qui libero totam voluptatum, facilis sunt voluptate maiores repudiandae! Nam, ut ea voluptatem, quaerat odio exercitationem praesentium, fuga unde alias eaque dignissimos tempore at minima distinctio!
Ab, error sapiente, natus suscipit quo, nihil similique minima ratione iure ipsa omnis pariatur. Laboriosam dolor accusantium corrupti enim! Laboriosam esse voluptates, assumenda delectus numquam necessitatibus quis mollitia non est!
Molestiae porro debitis magnam odit accusantium ad ipsum voluptatum rerum eveniet enim quis aliquid, quam hic soluta, odio, dicta eos architecto libero delectus aliquam. Magni quas quo aliquid ullam voluptas!
Maxime sapiente, dolorem odit impedit earum sunt vel nostrum. Nesciunt numquam quam aut laboriosam ducimus ex, aliquid aspernatur veniam nihil, exercitationem voluptatem qui itaque commodi expedita animi, reiciendis voluptatibus vero.
Sint nostrum officia hic quibusdam quo repellendus nam ad similique vitae numquam eius itaque possimus quisquam, dolorem voluptatem ut dicta enim esse asperiores dolores distinctio veritatis nihil aspernatur illo. Ipsa.
Eos aut optio ullam sapiente quasi tempora delectus nihil laborum vero repellat. Culpa, neque amet quis accusantium, et necessitatibus expedita numquam iure, quas eius ab nostrum veniam est fugit asperiores!
Autem iste illum veritatis, quas deleniti explicabo dolorem facere architecto quo unde libero quos laborum sunt illo laboriosam quasi debitis voluptate tenetur ipsum quia dolor. Labore expedita mollitia blanditiis dolore?
Ducimus libero ea nihil id, repudiandae vel accusantium facere voluptatum minus, expedita molestiae quidem explicabo aspernatur ratione. Dolore totam maiores est aliquam ratione modi, nesciunt quas voluptate ducimus? Debitis, incidunt?
Perferendis quasi ducimus ab modi quia sint tenetur voluptatibus nobis sequi eum sapiente, optio quidem ut quis velit tempora veniam cupiditate, quod eos autem, aspernatur assumenda rerum quam nisi. Alias!
Doloremque et at, vero consequuntur soluta assumenda accusantium earum, consequatur odit molestias fugit maiores dolor fuga. Quam consectetur vel porro pariatur deleniti numquam, tenetur necessitatibus ratione, reiciendis quasi animi ullam.</p>
 </div>
 <div id="section-2">
<h2>CSS Smooth Scrolling 2</h2>
   <a href="#section-1">Got to section 1</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam odit quae sapiente, cupiditate adipisci voluptatem sint officiis pariatur eum distinctio quaerat rem repellat delectus impedit, magnam, reiciendis corrupti ratione facere.
Labore sed iusto reprehenderit asperiores consequatur officiis delectus temporibus quod quasi? Dicta veritatis praesentium odit reprehenderit nulla animi? Ratione sunt quae perspiciatis culpa inventore nesciunt, eligendi dolore facere dicta illum!
Veniam laboriosam quos inventore maxime rem repellendus nam natus quisquam cupiditate quia voluptatibus commodi illo, ad ab sint velit dolores, at voluptates neque deserunt dignissimos quam assumenda? Suscipit, possimus ipsum.
Est repudiandae odio sapiente alias reiciendis nemo deleniti, tempora nostrum ipsum culpa numquam vel ad quis accusamus dolorum impedit veritatis iure quo. Delectus iure non, ratione odit eius dolorem rem.
Nam repellat suscipit incidunt consectetur, eaque neque. Exercitationem earum ea id! Cupiditate laudantium laborum eaque sunt perspiciatis consequuntur veniam saepe dolor deleniti quod molestiae, provident ipsa cum recusandae quidem neque?</p>
   </div>
!

CSS 

              
                * {
    scroll-behavior: smooth !important;
}
!

JS
!
999px

Console