css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

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.

            
              <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="button">
  <span class="prev"><i class="fa fa-chevron-up"></i></span>
</div>
<div id="scrollPane">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illo nihil esse quibusdam rerum assumenda, numquam nostrum velit consequuntur asperiores qui ex eum beatae ut id cumque ipsum voluptate, fuga.</p>
    <p>Sapiente ea et fuga exercitationem laudantium natus rem, similique possimus mollitia soluta sunt aliquam maiores labore tenetur, animi debitis non rerum illo dolorum nostrum reprehenderit voluptate. Adipisci dolores repellendus placeat.</p>
    <p>Modi quisquam facere in aperiam, quae provident et sequi fugiat molestiae tempore, doloribus deleniti dolores enim. Non asperiores, laboriosam, laborum molestiae dicta corporis repellendus ad, deleniti nostrum pariatur id nesciunt!</p>
    <p>Rerum, perferendis consequatur quasi et, ipsum amet sed commodi distinctio. Dicta itaque quam saepe quod illo aperiam, soluta, quis ipsa, eum aspernatur tempora quasi, repellendus est quo. Tempore, ullam, mollitia.</p>
    <p>Fugit tempora at ad sunt quae quo veniam est, quisquam, et autem quia. Aliquam adipisci laboriosam cum ipsam dicta vel voluptates fuga beatae nobis amet. Atque laboriosam doloremque doloribus ipsa?</p>
    <p>Suscipit odio, sequi assumenda, dignissimos tempore, illo aliquam omnis excepturi laborum consequatur rerum vel non corporis doloremque sunt sint saepe quidem modi voluptatem nihil ut. Ducimus quos nihil eligendi hic?</p>
    <p>Quasi quas rem omnis rerum, non, optio voluptate, esse libero neque accusantium quo magni cum error, nesciunt amet doloribus odio! Incidunt saepe, voluptas magnam ipsam impedit assumenda iusto beatae aliquid!</p>
    <p>Iste quisquam sunt error hic voluptas autem saepe commodi porro pariatur. Inventore quisquam ea quasi, laudantium natus neque officia debitis, adipisci facilis accusamus enim eligendi voluptatem. Iusto vitae doloribus in.</p>
    <p>Impedit provident, id perferendis atque corrupti? Quo laborum sed deserunt officia, doloremque optio rerum! Provident voluptatum ullam ut quibusdam expedita repudiandae asperiores. Rem, dignissimos, hic? Laboriosam architecto, animi repellat debitis.</p>
    <p>Rerum rem ratione totam eaque quos sit veniam at eum iure fugiat repudiandae, in doloribus inventore blanditiis maxime autem, tempora reprehenderit. Hic magni amet laborum, est optio dignissimos veritatis incidunt.</p>
    <p>Sequi eligendi officia at accusantium. Vitae expedita suscipit, eligendi assumenda, quae iste! Necessitatibus illum ea minus commodi facere quos, ducimus dolorum distinctio possimus, voluptates eum odio vitae quae alias iste.</p>
    <p>Officiis a minus totam dignissimos vel beatae. Veniam maiores incidunt rerum consequuntur unde blanditiis, voluptatibus corporis minus atque tempore tempora reprehenderit dolorem. Minima labore, perspiciatis a error excepturi totam unde?</p>
    <p>Alias molestias, ad culpa iure voluptatibus nobis nisi reiciendis magni dolorum, voluptates quae ut expedita ab, placeat! Eum illo, culpa alias delectus dolore reiciendis esse necessitatibus quaerat eius ipsam molestiae.</p>
    <p>Obcaecati repudiandae nisi eum eveniet laborum et saepe, harum, praesentium atque illo quia unde cupiditate impedit ducimus labore mollitia consectetur dolorum nemo expedita natus. Voluptatem et reprehenderit mollitia aspernatur nesciunt!</p>
    <p>Placeat illo molestias, maiores architecto, pariatur adipisci cum sequi sint obcaecati cupiditate temporibus vero, libero. Quis maiores distinctio, blanditiis reprehenderit quia, eligendi minima ab nobis delectus dicta voluptatibus sit et.</p>
    <p>At dolorem ipsa fugiat, ratione reiciendis voluptas excepturi facere facilis sed ducimus praesentium aliquam optio quae quidem voluptatum similique dicta consequatur minus ullam obcaecati pariatur! Fugiat iure placeat facere quidem!</p>
    <p>Ut neque dolores exercitationem illo reprehenderit voluptatem praesentium eum saepe nihil! Esse nisi vel repellendus autem animi rem, aliquid non molestiae nihil cumque. Obcaecati esse veritatis aut a quos, similique.</p>
    <p>Vel cupiditate, labore facere! Consequuntur animi pariatur aperiam atque. Dolore veniam et, voluptas eligendi accusamus eaque quae molestiae dolorum delectus nostrum blanditiis consequuntur, quis deserunt repudiandae rerum! In, cum repellat!</p>
    <p>Fugiat cum alias dolores optio? Itaque possimus magnam minus, ab molestiae, aperiam voluptatibus voluptatem repellat minima corrupti! Harum voluptatum asperiores nam earum! Blanditiis nesciunt temporibus sint libero, aliquid quod et.</p>
    <p>Voluptate eaque voluptatum placeat laudantium deleniti excepturi, blanditiis alias vitae earum, labore atque molestias pariatur, nihil facilis quod! Ullam harum a, minima tenetur earum, deleniti veritatis qui nobis assumenda eveniet!</p>
    <p>Recusandae dicta alias odio error eum, mollitia blanditiis, ea velit quaerat, adipisci maxime. Repellat nihil id eos ea quasi quae sequi explicabo. Impedit quam, modi magnam neque possimus, aspernatur consectetur!</p>
    <p>In veniam consequatur cum, enim sit fuga velit. Dicta ab doloribus officiis inventore dignissimos architecto assumenda nemo sapiente expedita sint eveniet quia error dolorum natus deserunt dolores, laudantium. Est, voluptatibus.</p>
    <p>Dolore temporibus reiciendis cum laudantium, facere, dolorum similique! Impedit, saepe laboriosam odit eos numquam omnis fugiat fuga cumque molestias ut accusantium similique vel, nobis et, nulla natus nostrum magnam itaque.</p>
    <p>Reprehenderit iusto eius distinctio quae suscipit at itaque, cupiditate placeat? Cum delectus modi animi, voluptatem in accusantium ab, maxime dolorem quibusdam a maiores facere impedit velit vel aperiam eos? Ea.</p>
    <p>Accusamus commodi tempora repellendus officiis accusantium praesentium, explicabo soluta necessitatibus impedit vero minima officia magnam voluptates unde saepe ullam facilis laborum, cumque sunt porro, expedita deleniti? Dolores totam, animi facere.</p>
    <p>Enim cupiditate fuga maiores facere unde aspernatur a aliquam quasi et, illo corporis veniam. Animi, tempora repellendus aut totam distinctio illum quis adipisci, quae nobis reiciendis voluptatibus quos blanditiis. Voluptatibus.</p>
    <p>Dolores eos qui porro dolore quo ea id quam magni at officia aliquam vel nam, harum aspernatur natus possimus perspiciatis eius! Nihil numquam reprehenderit perspiciatis obcaecati deserunt sed similique ipsum.</p>
    <p>Sequi ipsa tempore maxime eligendi repellat. Iusto voluptas minus recusandae deserunt, eveniet neque fuga distinctio at atque nulla eos cum reiciendis ipsum, obcaecati omnis quas nostrum labore quam earum officiis.</p>
    <p>Voluptas laboriosam explicabo atque delectus aut aliquid eligendi quae, sequi sit rerum eaque beatae et nam dolorum tempora est aliquam deserunt neque ab voluptatibus provident inventore laborum consectetur, quis sunt.</p>
    <p>Qui, illum, ducimus. Minus, illo aspernatur nesciunt accusamus impedit soluta blanditiis ratione. Fugit voluptates expedita quia dicta odio, nesciunt mollitia? In dicta tempora aut ea eaque aliquam sunt enim cum!</p>
    <p>Ad dolore, sed sit totam provident officiis suscipit repellendus ipsa quam, hic, doloremque amet consectetur. Distinctio fugiat laborum accusamus quibusdam culpa consequatur animi suscipit, quae omnis unde, officiis eum perspiciatis.</p>
    <p>Debitis earum esse corporis, harum numquam, ab aspernatur, quasi sunt sed maiores consequatur dolor. Assumenda quibusdam et, consequuntur ratione eius incidunt similique ipsa nulla tempore at, ipsam voluptates, rem doloremque.</p>
    <p>Hic voluptatibus tempore illum doloremque quas nesciunt libero aut eligendi obcaecati vero soluta, consequuntur iure ipsa odit cumque quidem, recusandae accusantium est illo. Autem, quaerat mollitia architecto atque perferendis quis.</p>
    <p>Dolorum quo impedit numquam perspiciatis magnam adipisci nesciunt, ut suscipit eius saepe minima, tempore quis mollitia sed quod sint obcaecati facilis. Quo assumenda, magnam ipsum alias sit nostrum eius aspernatur?</p>
    <p>Repellendus eum dignissimos, distinctio eos dolorem a iste sapiente. Iste veniam fugiat repellendus perspiciatis, dolor deserunt explicabo aliquid fuga saepe illum quas praesentium facilis, ab exercitationem laborum perferendis velit ipsam!</p>
    <p>Quis beatae nihil illo, alias optio perferendis animi enim. Blanditiis, quibusdam, quo, adipisci aut error aperiam velit ullam temporibus repellendus repellat alias saepe facere pariatur. Illum alias laudantium, iure velit!</p>
    <p>Ex facilis ad illum nemo est dicta, unde esse autem eos saepe labore assumenda, doloremque et ea laudantium dolorem nostrum vitae obcaecati, magnam voluptatum? Consequatur porro, cupiditate deserunt. Impedit, in.</p>
    <p>Ad hic facere sapiente obcaecati accusamus, tenetur tempora alias consequuntur odit, omnis explicabo dolorum, dolorem aliquam non qui id, corrupti quo pariatur. Libero aliquam fuga at magni corrupti non sunt.</p>
    <p>Dignissimos, culpa repellendus voluptatum. Reprehenderit quis, voluptatum eaque, repellendus in optio necessitatibus nihil cum accusantium quidem labore, soluta id iure aspernatur? Voluptatum delectus quidem animi non suscipit quis laborum neque?</p>
    <p>Nulla natus harum laboriosam molestiae ad minima sint dicta quae, eos veritatis nobis, alias sed numquam modi aspernatur laborum. Voluptas modi itaque voluptatum, fugit tenetur facilis quibusdam deserunt quod enim.</p>
    <p>Error incidunt fuga eligendi quasi placeat minus nihil, magnam perferendis officia modi, eum culpa voluptas omnis eos asperiores, mollitia rem ut repellendus. Magnam sed aspernatur dolore, ipsam, voluptatum voluptas sunt!</p>
    <p>Nesciunt, quasi officiis voluptatum fugiat doloribus cum velit odio explicabo fuga repellendus enim quod omnis ipsa ullam molestiae quaerat aliquid quisquam dolores fugit dolorem vitae repellat aliquam. Quae, non, officia?</p>
    <p>Quos, officia eligendi suscipit aliquid veniam fugiat commodi consectetur itaque ea repudiandae mollitia impedit vero voluptas nulla, eos laudantium molestiae explicabo, provident et. Voluptates ex laboriosam, odit itaque sunt quod.</p>
    <p>Culpa animi voluptatibus, consequuntur tenetur quod nam, ea omnis totam fugit eaque ullam nostrum vitae earum reiciendis ex illum ducimus unde impedit in fuga officiis assumenda mollitia suscipit. Atque, praesentium.</p>
    <p>Repudiandae, aut. Voluptatum hic dolor aliquid maxime commodi sequi reiciendis consectetur optio voluptatem velit ipsa minus ea, quos, tempore cumque dolore fugiat quod incidunt minima. Aliquam sit, incidunt eligendi nemo.</p>
    <p>Repellat illo magnam in eius, vero neque, repellendus cupiditate obcaecati velit iste enim rem recusandae molestiae veniam harum. Impedit vel recusandae voluptatum accusamus quasi natus esse magnam, vitae quos nihil.</p>
    <p>Minus, totam. Illum earum, tempore! Ullam voluptatem labore minima architecto, harum similique quos et, unde necessitatibus aperiam nihil ipsum placeat rerum tenetur ipsam deserunt, hic porro in perferendis maiores reiciendis?</p>
    <p>Culpa, mollitia, quod. Impedit unde tempore eum ad esse maiores quas nihil, totam provident voluptatibus voluptate reprehenderit voluptatum ipsa nostrum qui hic sunt enim! Alias, placeat. Harum quos hic quo.</p>
    <p>Quidem quibusdam quo placeat dolor, explicabo doloribus unde minus iure harum, perferendis, pariatur nesciunt magnam saepe amet quod quisquam, distinctio tempora blanditiis sapiente voluptates at nihil quia? Accusantium, corrupti, porro!</p>
    <p>Qui commodi eveniet a in quas, magnam itaque consectetur maiores corporis, placeat ad id aut. Enim qui voluptates ab recusandae repudiandae consequatur sed quisquam, quam, ratione facere, accusantium numquam veniam?</p>
  </div>
</div>
<div class="button">
  <span class="next"><i class="fa fa-chevron-down"></i></span>
</div>
            
          
!
            
              * {
  margin: 0; padding: 0; list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
}
body {
  margin: 15px auto;
  width: 450px;
}
#scrollPane {
  padding: 10px;
  max-height: 250px;
  overflow: hidden;
  background-color: #fff;
}
#scrollPane p {
  margin: 0 0 10px;
  text-align: justify;
}
.buttons, .button {
  overflow: hidden;
}
.buttons span {
  float: left;
  width: 50%;
  background-color: #ccc;
  border: 1px solid #999;
  cursor: pointer;
  text-align: center;
  font-size: 0.75em;
  padding: 0 0 1px;
}
.button span {
  display: block;
  background-color: #ccc;
  border: 1px solid #999;
  cursor: pointer;
  text-align: center;
  font-size: 0.75em;
  padding: 0 0 1px;
}
            
          
!
            
              $(function () {
  $(".prev").mouseover(function () {
    $("#scrollPane").animate({
      "scrollTop": 0
    }, 1000);
  }).mouseout(function () {
    $("#scrollPane").stop();
  });
  $(".next").mouseover(function () {
    $("#scrollPane").animate({
      "scrollTop": $("#scrollPane .wrap").height()
    }, 1000);
  }).mouseout(function () {
    $("#scrollPane").stop();
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console