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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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.

HTML

              
                <div class="main">
        <h1>Scroll</h1>
        
        <div class="controls">
            <div>
                <p><strong>Toggle scroll indicator:</strong>
                    <a href="#" id="toggle-button">
                        <strong>ON</strong>/<span>OFF</span>
                    </a>
                </p>
            </div>
        </div>

        <hr>
 
            <p>Alice was beginning to get very
    tired of sitting by her sister on
    the bank, and of having nothing
    to do: once or twice she had
    peeped into the book her sister was reading,
    but it had no pictures or conversations in
    it, "and what is the use of a book," thought
    Alice, "without pictures or conversations?"</p>
     
     <p>So she was considering in her own mind
     (as well as she could, for the hot day made
     her feel very sleepy and stupid) whether the
     pleasure of making a daisy-chain would be
     worth the trouble of getting up and picking
     the daisies, when suddenly a White Rabbit
     with pink eyes ran close by her.</p>

     <p>There was nothing so <i>very</i> remarkable in
     that; nor did Alice think it so <i>very</i> much out
     of the way to hear the Rabbit say to itself, "Oh
     dear! Oh dear! I shall be too late!" (when
     she thought it over afterwards, it occurred
     to her that she ought to have wondered at
     this, but at the time it all seemed quite
     natural); but when the Rabbit actually <i>took
     a watch out of its waistcoat-pocket</i>, and
     looked at it, and then hurried on, Alice
     started to her feet, for it flashed across her
     mind that she had never before seen a rabbit
     with either a waistcoat-pocket, or a watch to
     take out of it, and burning with curiosity,
     she ran across the field after it, and was just
     in time to see it pop down a large rabbit-hole
     under the hedge.</p>

     <p>In another moment down went Alice after
     it, never once considering how in the world
     she was to get out again.</p>

     
         <p>Either the well was very deep, or she fell
         very slowly, for she had plenty of time as she
         went down to look about her, and to wonder
         what was going to happen next. First, she
         tried to look down and make out what she
         was coming to, but it was too dark to see
         anything; then she looked at the sides of the
         well and noticed that they
         were filled with cupboards and
         book-shelves: here and there
         she saw maps and pictures
         hung upon pegs. She took
         down a jar from one of the
         shelves as she passed; it was
         labelled "ORANGE MARMALADE,"
         but to her disappointment
         it was empty;
         she did not like to drop the
         jar for fear of killing somebody
         underneath, so managed to put it into
         one of the cupboards as she fell past it.</p>

     
         <p>"Well!" thought Alice to herself. "After
         such a fall as this, I shall think nothing of
         tumbling down stairs! How brave they'll all
         think me at home! Why, I wouldn't say
         anything about it, even if I fell off the
         top of the house!" (Which was very likely
         true.)</p>

     
           <p>Down, down, down. Would the fall <i>never</i>
           come to an end? "I wonder how many miles
           I've fallen by this time?" she said aloud. "I
           must be getting somewhere near the centre of
           the earth. Let me see: that would be four
           thousand miles down. I think&mdash;" (for, you
           see, Alice had learnt several things of this
           sort in her lessons in the schoolroom, and
           though this was not a <i>very</i> good opportunity
           for showing off her knowledge, as there was
           no one to listen to her, still it was good practice
           to say it over) "&mdash;yes, that's about the
           right distance&mdash;but then I wonder what Latitude
           or Longitude I've got to?" (Alice had
           no idea what Latitude was, or Longitude
           either, but thought they were nice grand
           words to say.)</p>

     <p>Presently she began again. "I wonder if
     I shall fall right <i>through</i> the earth! How
     funny it'll seem to come out among the people
     that walk with their heads downwards! The
     Antipathies, I think&mdash;" (she was rather glad
     there <i>was</i> no one listening, this time, as it
     didn't sound at all the right word) "&mdash;but
     I shall have to ask them what the name of the
     country is, you know. Please, Ma'am, is this
     New Zealand or Australia?" (and she tried to
     curtsey as she spoke&mdash;fancy <i>curtseying</i> as
     you're falling through the air! Do you think
     you could manage it?) "And what an ignorant
     little girl she'll think me! No, it'll
     never do to ask: perhaps I shall see it written
     up somewhere."</p>

     <p>Down, down, down. There was nothing
     else to do, so Alice soon began talking again.
     "Dinah'll miss me very much to-night, I
     should think!" (Dinah was the cat.) "I
     hope they'll remember her saucer of milk at
     tea-time. Dinah, my dear, I wish you were
     down here with me! There are no mice in
     the air, I'm afraid, but you might catch a bat,
     and that's very like a mouse, you know. But
     do cats eat bats, I wonder?" And here Alice
     began to get rather sleepy, and went on saying
     to herself, in a dreamy sort of way, "Do cats
     eat bats? Do cats eat bats?" and sometimes,
     "Do bats eat cats?" for, you see, as she
     couldn't answer either question, it didn't
     much matter which way she put it. She felt
     that she was dozing off, and had just begun
     to dream that she was walking hand in hand
     with Dinah, and saying to her very earnestly,
     "Now, Dinah, tell me the truth: did you ever
     eat a bat?" when suddenly, thump! thump!
     down she came upon a heap of sticks and dry
     leaves, and the fall was over.</p>

     <p>Alice was not a bit hurt, and she jumped
     up on to her feet in a moment: she looked
     up, but it was all dark overhead; before her
     was another long passage, and the White
     Rabbit was still in sight, hurrying down it.
     There was not a moment to be lost: away
     went Alice like the wind, and was just in time
     to hear it say, as it turned a corner, "Oh my
     ears and whiskers, how late it's getting!" She
     was close behind it when she turned the corner,
     but the Rabbit was no longer to be seen: she
     found herself in a long, low hall, which was lit
     up by a row of lamps hanging from the roof.</p>

     <p>There were doors all round the hall, but
     they were all locked; and when Alice had been
     all the way down one side and up the other,
     trying every door, she walked sadly down the
     middle, wondering how she was ever to get
     out again.</p>

     <p>Suddenly she came upon a little three-legged
     table, all made of solid glass; there
     was nothing on it but a tiny golden key, and
     Alice's first idea was that this might belong
     to one of the doors of the hall; but, alas!
     either the locks were too large, or the key was
     too small, but at any rate it would not open
     any of them. However, on the second time
     round, she came upon a low curtain she had
     not noticed before, and behind it was a little
     door about fifteen inches high: she tried the
     little golden key in the lock, and to her great
     delight it fitted!</p>

     <p>Alice opened the door and found that it led
     into a small passage, not much larger than a
     rat-hole: she knelt down and looked along
     the passage into the loveliest garden you ever
     saw. How she longed to get out of that dark
     hall, and wander about among those beds of
     bright flowers and those cool fountains, but
     she could not even get her head through the
     doorway; even if my head would go
     through," thought poor Alice, "it would be of
     very little use without my shoulders. Oh,
     how I wish I could shut up like a telescope!
     I think I could, if I only knew how to begin."
     For, you see, so many out-of-the-way things
     had happened lately, that Alice had begun to
     think that very few things indeed were really
     impossible.</p>

     <p>There seemed to be no use in waiting by
     the little door, so she went back to the table,
     half hoping she might find another key on it,
     or at any rate a book of rules for shutting
     people up like telescopes: this time she found
     a little bottle on it ("which certainly was not
     here before," said Alice,) and tied round the
     neck of the bottle was a paper label, with the
     words "DRINK ME" beautifully printed
     on it in large letters.</p>

     <p>It was all very well to say "Drink me,"
     but the wise little Alice was not going to do
     <i>that</i> in a hurry. "No, I'll look first," she
     said, "and see whether it's marked '<i>poison</i>'
     or not;" for she had read several nice little
     stories about children who had got burnt,
     and eaten up by wild beasts, and other
     unpleasant things, all because they <i>would</i>
     not remember the simple rules their friends
     had taught them: such as, that a red-hot
     poker will burn you if you hold it too
     long; and that, if you cut your finger <i>very</i>
     deeply with a knife, it usually bleeds; and
     she had never forgotten that, if you drink
     much from a bottle marked "poison," it is
     almost certain to disagree with you, sooner
     or later.</p>

     <p>However, this bottle was <i>not</i> marked
     "poison," so Alice ventured to taste it, and
     finding it very nice (it had, in fact, a sort of
     mixed flavour of cherry-tart, custard, pineapple,
     roast turkey, coffee, and hot buttered
     toast,) she very soon finished it off.</p>

     <p>"What a curious feeling!" said Alice.
     "I must be shutting up like a telescope."</p>

     <p>And so it was indeed: she was now only
     ten inches high, and her face brightened up
     at the thought that she was now the right
     size for going through that little door into
     that lovely garden. First, however, she
     waited for a few minutes to see if she was
     going to shrink any further: she felt a little
     nervous about this: "for it might end, you
     know," said Alice to herself, "in my going
     out altogether, like a candle. I wonder what
     I should be like then?" And she tried to
     fancy what the flame of a candle looks like
     after the candle is blown out, for she could
     not remember ever having seen such a thing.</p>

     <p>After a while, finding that nothing more
     happened, she decided on going into the
     garden at once; but, alas for poor Alice!
     when she got to the door, she found she had
     forgotten the little golden key, and when
     she went back to the table for it, she found
     she could not possibly reach it: she could
     see it quite plainly through the glass, and
     she tried her best to climb up one of the legs
     of the table, but it was too slippery; and when
     she had tired herself out with trying, the
     poor little thing sat down and cried.</p>

        <a href="http://svarden.se/blog/2013-05-07-making-scrolling-less-confusing/">&larr; back to blog post</a>

    </div>
              
            
!

CSS

              
                @keyframes fade {
    to {opacity: 0.4; transform: scale(0);}
}

@-o-keyframes fade {
    to {opacity: 0.4; -o-transform: scale(0);}
}

@-ms-keyframes fade {
    to {opacity: 0.4; -ms-transform: scale(0);}
}

@-moz-keyframes fade {
    to {opacity: 0.4; -moz-transform: scale(0);}
}

@-webkit-keyframes fade {
    to {opacity: 0; -webkit-transform: scale(0);}
}


body {
    max-width: 650px;
    margin: 0 auto;
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    color: #444;
    line-height: 1.6;
    background: #fff;
}

a {
    color: #2DC67C;
    text-decoration: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.controls span {
    color: #94EFC0;
}

.main {
    position: relative;
}

.hidden {
    visibility: hidden;
}

.indicator {
    position: absolute;

    width: 30px;
    height: 20px;
    left: -45px;

    -webkit-animation-duration: .5s;
    -moz-animation-duration:    .5s;
    -ms-animation-duration:     .5s;
    -o-animation-duration:      .5s;
    animation-duration:         .5s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode:    forwards;
    -ms-animation-fill-mode:     forwards;
    -o-animation-fill-mode:      forwards;
    animation-fill-mode:         forwards;
}

.eye {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAYAAAAHpoRMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAGYktHRAD/AP8A/6C9p5MAAAGySURBVEhLzVa7qsJAEJ2kESIRO+u0scwf+Gg0IqL4BUIqfyFFKlG0yC9Yp7MQJFUKO9FCK7GyEAtLS3PdvSTkOps1FyNkwcJ5np05sxPBfx7IyBEzgoPCyBQYgdemxWIBq9UKTqcTRa4oCtTrdWi1Wt8pKAHzeobDIeER92cYBsv1IxlEvY/HIxOALMt+oVBg6g6Hw0cAos4hGNd1UTJd11GibreL7JbLZSwgVVUTg6VgdrsdStBsNsMgs9nMH4/H4f9er4fsN5sNMykBkxQQJbAgCIiQwfPzqouTkwCsJ6tcLoex9/s9l/hipVJBBrlcjsps20a60WhEZcViEelqtRo3WRQYy1C83W6pjen9fufGelcZuFwuzCkJCPA64nHy3y7h8x/OiKVSCUzTRDd6EpjKCA+m0ylMJpOQE08CI3vP82Kr8rYigWdwl36/jyrUaDTQVTudDrJzHCfx+PIM/9TWsixmyyRJ8vP5PFO33W5TAUKCoEZfr1df07S362AwGKQGIggUuygfjwfM53NYr9dwPp+BvDdkUVarVWi326lNYDQQd2t/JSMnaKa+ZzIF5gfo9Jtm1adlJwAAAABJRU5ErkJggg==');
}

.arrow {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAUCAIAAACIxBMbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABvSURBVEhL7ZRRDgAQDEPdxf3PiC+JGdpYRsS+rU/TbSF5VfACpYYU7ao3IEkmFsuHryGZGBqJHJoIxJOaAdLIeaqziUiLNwRJrAALQ0nqplEwiDRZaBwGkaqcU06F90lthlxOeP6LC7sjtOx90VMGFXKCDo6ccOUAAAAASUVORK5CYII=');
}
              
            
!

JS

              
                /*!
 * scrollindicator.js
 * http://svarden.se/demo/scroll/
 * MIT licensed
 *
 * Copyright (C) 2013 Jonathan Svärdén, http://svarden.se
 */

var scrollIndicator = (function(){
    'use strict';

    var settings = {

        // The text container where you want the indicator to appear. Needs to be positioned.
        indicateOn: '.main',

        // After this many milliseconds the indicator no longer sticks, and starts disappearing.
        fadeDelay: 1500,

        // CSS class that defines the indicator icon.
        icon: 'eye'
    };

    // Poor man's options extend.
    var extend = function(options){
                var prop;
                for( prop in options ){
                  if( prop in settings ){
                    settings[prop] = options[prop];
                }
            }
        };

    var create = function(options){

        if(options){
            extend(options);
        }

        var indicatorElement = document.createElement('span'),
            indicateOn = document.querySelector(settings.indicateOn);

        indicatorElement.classList.add('indicator');
        indicatorElement.classList.add(settings.icon);
        indicatorElement.style.top = window.innerHeight + window.pageYOffset - 23 + 'px';

        indicateOn.appendChild(indicatorElement);

        return indicatorElement;
    };

    var init = function(options){
        var indicator = create(options),
            scrolling = false;

        function delayedExec(fn, delay){
            var timer,
                yOffset = window.pageYOffset;
            
            return function(){
                if(!scrolling){
                    indicator.style.top = window.innerHeight + yOffset - 23 + 'px';
                    scrolling = true;
                }

                yOffset = window.pageYOffset;

                indicator.style.webkitAnimationName = '';
                indicator.style.MozAnimationName = '';
                indicator.style.animationName = '';

                clearTimeout(timer);
                timer = setTimeout(fn, delay);
            };
        }

        var updatePosition = delayedExec(function(){
                scrolling = false;

                indicator.style.webkitAnimationName = 'fade';
                indicator.style.MozAnimationName = 'fade';
                indicator.style.animationName = 'fade';

            }, settings.fadeDelay);

        document.addEventListener('scroll', updatePosition, false);
    };

    return {
        init: init
    }
})();

scrollIndicator.init();

var toggle = document.getElementById('toggle-button'),
    indicator = document.querySelector('.indicator'),
    toggledOn = true;

toggle.addEventListener('click', function(){
  toggledOn = toggledOn ? false : true;
  indicator.classList.toggle('hidden');
  if(toggledOn){
    toggle.innerHTML = "<strong>ON</strong>/<span>OFF</span>";
  }else {
    toggle.innerHTML = "<span>ON</span>/<strong>OFF</strong>";
  }
}, false);
              
            
!
999px

Console