Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

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.

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.

Template

Make Template?

Templates are Pens that can be used to start other Pens. You can view all of your templates, or learn more in the documentation.

Screenshot

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

Uploading

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <nav>
  <button id="b1">.animate() scrollTop on html &amp; body</button>
  <button id="b2">.scrollTop() on html &amp; body</button>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae repellendus qui iste excepturi nulla repudiandae distinctio itaque quia fugiat laborum illum iure consequuntur explicabo officia assumenda ea accusantium impedit ad minus ab dolorem officiis rerum voluptas dolor vitae eveniet facilis? Quam sapiente earum excepturi similique explicabo ipsum quod optio dolorum vel pariatur aliquid quasi sit delectus a facilis dolore fugiat culpa sed voluptatibus voluptates iure qui numquam magni debitis illum minima nihil quas aliquam laudantium laboriosam maxime assumenda omnis alias beatae vitae asperiores veritatis at eius nostrum ratione saepe molestias harum quis error enim ex! Voluptates autem corporis voluptatum ipsa tenetur dolorum totam repellat molestiae expedita beatae. Blanditiis non nobis architecto vel qui et illum sequi rerum cum dignissimos praesentium neque eum omnis laborum aut minus dolorum mollitia quae deserunt fugit. Numquam perspiciatis itaque fugit. Quod commodi saepe eaque ipsam repellendus non rem ea ex maxime fugit dolores molestias sunt harum exercitationem illum asperiores ipsa excepturi explicabo error sint ab distinctio eius atque! Doloremque sapiente enim modi inventore quas perferendis hic ut porro fugit nostrum? Nemo ut adipisci voluptas illo voluptatum culpa molestias veritatis enim est qui architecto hic mollitia odit veniam accusantium voluptatem neque! Tempora blanditiis veniam eius laborum sunt id dolorum sed quo nihil ipsum voluptatem quam cum odio aut vero. Soluta non officia ab delectus perspiciatis possimus veritatis inventore sed incidunt modi nulla iste harum iure consectetur quos aliquam enim praesentium recusandae quibusdam maxime in vel saepe blanditiis fugiat fugit eveniet nostrum tempore quae iusto. Nam suscipit deserunt dolorum possimus perferendis laboriosam sed neque molestiae ullam dignissimos libero commodi corrupti iste nulla sint ipsum fuga minima dolores voluptatum sunt accusamus unde hic eius et id asperiores perspiciatis! Et fuga hic cupiditate qui eveniet consectetur nobis. Sed ut in quo quaerat commodi numquam molestias animi quos cupiditate quod libero rerum voluptatibus sunt minus itaque architecto et nisi alias ipsa non fugit debitis voluptates possimus neque labore. Ut rem voluptatibus vel quos! Voluptate tempore maxime dicta fugit tenetur inventore molestias voluptas ducimus neque obcaecati dignissimos commodi ipsam libero doloremque excepturi molestiae praesentium eum nam rerum nisi? Sapiente minus ratione perspiciatis temporibus dolorum veniam quos iure labore beatae dolorem dicta modi iste suscipit rem culpa rerum provident cupiditate distinctio explicabo laborum officiis nesciunt eligendi nam nihil quo ipsa eos amet enim quaerat. Voluptas voluptatem quis tempore quam rem quos ipsum optio sunt reprehenderit molestiae fugit minima voluptates obcaecati maiores aliquam dicta exercitationem modi tenetur dignissimos accusamus beatae hic accusantium amet dolorem expedita quidem velit cum iusto odit quaerat necessitatibus magnam architecto quibusdam? Nisi nihil quisquam incidunt doloribus enim inventore pariatur possimus temporibus voluptatem mollitia quae consequatur cumque est quo soluta. Quaerat excepturi maiores dolores commodi suscipit expedita eligendi sequi eveniet repellat laudantium distinctio aperiam quo nobis! Mollitia explicabo architecto porro labore deserunt inventore voluptatem temporibus quod quia officia consequuntur molestiae nobis consequatur. Corrupti nulla nihil odio harum saepe consequatur cupiditate. Est expedita enim voluptatum in nisi nemo explicabo quidem temporibus quasi totam perspiciatis dolorem molestiae sequi quas nulla reprehenderit maiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia reiciendis voluptate nihil libero necessitatibus ab dolores distinctio officiis saepe quisquam soluta aliquam reprehenderit non ipsam ullam nemo temporibus earum. Aut quidem accusantium sequi consequuntur itaque dolorem animi perferendis voluptas corporis quisquam quas aspernatur corrupti odit eos beatae modi doloribus similique sint enim ut. Nesciunt facere quae cumque ipsa esse corporis sequi nemo adipisci asperiores repudiandae voluptates nulla quaerat quidem deleniti molestias ipsam maxime possimus maiores magni blanditiis vitae et enim beatae reprehenderit doloribus consequatur minima nihil magnam quod. Non saepe adipisci reprehenderit laudantium soluta velit dolorum ipsam animi error dolorem! Pariatur adipisci neque iste vitae quasi quibusdam explicabo nam eius quae eaque veritatis eum molestiae impedit maxime cumque ea esse quidem possimus fuga aspernatur deserunt quos quaerat placeat voluptatem distinctio totam rerum doloribus quo ut minima nisi vel quisquam tempora. Possimus ratione eum tempore nam atque eligendi sed totam aliquid eos repudiandae a ab quasi iste ea architecto quidem assumenda illum aut fuga quia delectus inventore iusto quos sint dolores esse enim animi deserunt doloribus perferendis accusantium mollitia quis deleniti. Nulla aut praesentium error et nam nesciunt quisquam ipsa quo aliquid ipsum sit accusantium unde ipsam ex blanditiis veniam vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam saepe dignissimos esse quas blanditiis veniam animi earum placeat quis non et ratione quae minus nulla asperiores tenetur fugit suscipit aspernatur facere enim expedita eligendi similique at. Consequuntur enim nesciunt exercitationem natus laudantium reiciendis omnis veniam iure obcaecati laborum. Ea soluta vel libero porro quos aspernatur rerum expedita harum illum et tempora quas perferendis doloribus quia similique hic eveniet vero sed commodi placeat nemo aut facilis officia nobis impedit modi non nulla. Quibusdam hic maxime quod libero pariatur saepe ratione accusamus minus sunt iusto dolorum recusandae unde ducimus rerum rem molestiae possimus perspiciatis deserunt nostrum voluptates ut magni numquam voluptatem inventore similique a laudantium ipsa quos fugiat in voluptatibus cumque officiis praesentium accusantium illum harum doloribus. Autem in sed laboriosam aliquid vero voluptatibus nulla qui dolore eum animi doloremque beatae deserunt suscipit voluptatem a nesciunt reprehenderit illum amet quidem ipsum. Reiciendis corporis iusto praesentium et repellat officiis enim inventore distinctio quisquam natus eligendi maxime consequatur aut voluptatum id alias facilis doloribus at pariatur veniam. Exercitationem error vel nulla nesciunt alias temporibus hic tenetur iusto sit dolore nam ipsa sunt explicabo voluptate voluptatem consequuntur voluptates magni quasi architecto quaerat beatae eligendi quos dicta ea illo dolorum mollitia nostrum laboriosam incidunt rerum facilis cum harum asperiores magnam quidem ab animi doloribus fugit odio quibusdam veritatis soluta? Magni similique eius quam repellendus magnam architecto nesciunt quisquam! Aut porro nulla alias temporibus distinctio ad minus magni incidunt aspernatur exercitationem ipsum reiciendis odit. Ea voluptate officiis vero mollitia perferendis dolore id nam eos soluta numquam nihil sit culpa explicabo esse placeat molestiae sapiente asperiores animi optio cumque inventore eum molestias quae ipsam voluptatum minima natus nesciunt nobis provident accusantium impedit ducimus dignissimos veritatis? Eius ipsa voluptates id quae nesciunt. Distinctio delectus dolore nihil alias minus nulla inventore. Porro provident earum rerum facere aliquid possimus numquam! Obcaecati tempora velit accusamus animi sequi laborum iusto excepturi sapiente voluptatum? Reiciendis perferendis recusandae ut ipsam veritatis placeat sint eum obcaecati ipsa velit sunt fugiat in voluptate dolore quibusdam iusto voluptas eveniet. Dicta dolores minima molestiae ad reiciendis illum dignissimos harum similique laboriosam magni hic repellat quae quidem iusto quisquam. Nulla quam et a pariatur quaerat reiciendis saepe porro animi molestiae doloribus suscipit atque enim quae explicabo quis dolores totam odit id sapiente beatae expedita illo laborum tenetur eaque exercitationem! Architecto quam deserunt quo recusandae magni dicta numquam. Error quisquam assumenda saepe beatae nesciunt amet doloribus consequatur dicta consectetur explicabo tempora dolores impedit tenetur id suscipit. Labore totam officia officiis pariatur nesciunt voluptatum reiciendis id perspiciatis eveniet illo quaerat exercitationem dicta sit ullam nam dolorum eius alias? Rerum fugiat sit dolores facere tenetur asperiores dolorum rem at illum vero quasi minima ducimus sequi similique in unde eveniet temporibus molestiae nesciunt voluptates. Iusto quo minus id aliquid iure eaque ipsum corporis quam dignissimos inventore amet voluptatum laborum praesentium veritatis consequuntur adipisci aliquam incidunt dolorem voluptas maxime! Illo maiores consequatur omnis in ut mollitia voluptatem odio quam enim fugiat molestias minima soluta error quibusdam tempore ipsum velit nobis expedita adipisci quo. Rerum corporis iusto cum hic natus! Expedita sapiente est ab autem similique pariatur non nesciunt minima reiciendis ad dolores neque tempora quam esse quo officiis quisquam incidunt delectus inventore at quos ipsa ea magni dolor porro. Provident optio velit placeat voluptatibus deserunt repellendus accusantium harum! Temporibus vitae ea eligendi velit doloribus molestias recusandae nihil beatae suscipit ad non quod consectetur. Architecto laborum molestias iure saepe dolorem modi aperiam quo vel facere ratione dolore ducimus veniam qui quod culpa cum sed enim possimus quisquam excepturi. Praesentium quasi magni doloribus esse repellendus nam reiciendis. Iste nihil nemo distinctio nobis nesciunt ratione consequatur vel sed molestiae laborum blanditiis optio placeat perferendis culpa amet laudantium ipsam odio excepturi doloremque dolore quisquam repellat tempora sunt libero saepe in qui voluptas voluptates alias cum. Distinctio quas eveniet at laudantium ducimus aliquam rem odit amet sunt dicta atque in tempore laborum assumenda inventore quod ea modi mollitia illum quasi esse iste neque cupiditate sed accusamus dolor soluta voluptas voluptate a magnam maiores nemo doloremque maxime? Sapiente aperiam facere reprehenderit deserunt explicabo tempore expedita qui temporibus nisi quos soluta corporis dolore porro illum natus ex mollitia quisquam libero distinctio obcaecati rem debitis vel dicta voluptates cumque numquam magni hic quis magnam ab minima molestias repellendus quia quibusdam dolor ea id quo! Eos facilis fuga ab porro sit alias blanditiis adipisci reprehenderit? Ab asperiores odit pariatur voluptate reiciendis libero iusto distinctio aperiam delectus repellat ipsa quaerat. Temporibus vero tempore cumque aperiam enim saepe veritatis nobis dolore voluptatem explicabo velit nemo repellat harum obcaecati necessitatibus accusantium laboriosam. Illo qui atque soluta corporis debitis quasi tenetur ea similique placeat architecto. Ipsam illum error sapiente consequuntur adipisci provident culpa fuga labore atque quaerat. Nulla ipsam et magni fuga praesentium dolorem dolore voluptatibus quibusdam ducimus ipsa vel suscipit sit soluta hic eaque at quidem aliquam labore voluptatum itaque temporibus excepturi perferendis distinctio. Harum iure ducimus eaque veniam voluptatem delectus enim cumque numquam nulla doloribus praesentium assumenda tempora quis suscipit id illum similique consectetur saepe doloremque eius vel quo labore aliquid corrupti omnis! Suscipit possimus harum fugit minima similique. Deleniti possimus facilis delectus at fugiat labore mollitia dolorem facere assumenda accusamus aut veniam reprehenderit eaque inventore dolore numquam id dignissimos nisi illo explicabo? Velit voluptatem quod assumenda fugiat placeat veritatis reiciendis dolore similique praesentium. Perferendis omnis tempore tempora itaque veritatis dolores illo corporis provident a alias.</p>
              
            
!

CSS

              
                nav{
  color:red;
  position: fixed;
  left:0;
  top:0;
}

html,body{
  overflow:scroll;
  margin:30px;
  padding:30px;
}
html{
  height:100px;
  background:rgba(0,255,0,.1);
}
body{
  height:500px; 
  background:rgba(0,0,255,.1);
}
              
            
!

JS

              
                $('#b1').on('click',function(){
  $('html,body').animate({scrollTop:Math.random()*100},1000);
});

$('#b2').on('click',function(){
  $('html,body').scrollTop(Math.random()*100);
});
              
            
!
999px

Console