Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

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

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