A Pen by Andrew Patton.

Animate-scroll-with-CSS3-transition-(with-jQuery).markdown

Animate scroll with CSS3 transition (with jQuery)

Same as the sans jQuery version from which it was forked but with jQuery.

A Pen by Andrew Patton on CodePen.

License.

index.markdown

This is the first target.

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

“What’s happened to me?” he thought. It wasn’t a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.

This is the second target.

Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. “How about if I sleep a little bit longer and forget all this nonsense”, he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn’t get into that position. However hard he threw himself onto his right, he always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that he wouldn’t have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before.

“Oh, God”, he thought, “what a strenuous career it is that I’ve chosen! Travelling day in and day out. Doing business like this takes much more effort than doing your own business at home, and on top of that there’s the curse of travelling, worries about making train connections, bad and irregular food, contact with different people all the time so that you can never get to know anyone or become friendly with them. It can all go to Hell!” This is the third target. He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so that he could lift his head better; found where the itch was, and saw that it was covered with lots of little white spots which he didn’t know what to make of; and when he tried to feel the place with one of his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder.

He slid back into his former position. “Getting up early all the time”, he thought, “it makes you stupid. You’ve got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during the morning to copy out the contract, these gentlemen are always still sitting there eating their breakfasts. I ought to just try that with my boss; I’d get kicked out on the spot. But who knows, maybe that would be the best thing for me. If I didn’t have my parents to think about I’d have given in my notice a long time ago, I’d have gone up to the boss and told him just what I think, tell him everything I would, let him know just what I feel. He’d fall right off his desk! And it’s a funny sort of business to be sitting up there at your desk, talking down at your subordinates from up there, especially when you have to go right up close because the boss is hard of hearing. Well, there’s still some hope; once I’ve got the money together to pay off my parents’ debt to him - another five or six years I suppose - that’s definitely what I’ll do. That’s when I’ll make the big change. First of all though, I’ve got to get up, my train leaves at five.”

And he looked over at the alarm clock, ticking on the chest of drawers. “God in Heaven!” he thought. It was half past six and the hands were quietly moving forwards, it was even later than half past, more like quarter to seven. Had the alarm clock not rung? He could see from the bed that it had been set for four o’clock as it should have been; it certainly must have rung. Yes, but was it possible to quietly sleep through that furniture-rattling noise? True, he had not slept peacefully, but probably all the more deeply because of that. What should he do now? The next train went at seven; if he were to catch that he would have to rush like mad and the collection of samples was still not packed, and he did not at all feel particularly fresh and lively. And even if he did catch the train he would not avoid his boss’s anger as the office assistant would have been there to see the five o’clock train go, he would have put in his report about Gregor’s not being there a long time ago. The office assistant was the boss’s man, spineless, and with no understanding. What about if he reported sick? But that would be extremely strained and suspicious as in fifteen years of service Gregor had never once yet been ill. His boss would certainly come round with the doctor from the medical insurance company, accuse his parents of having a lazy son, and accept the doctor’s recommendation not to make any claim as the doctor believed that no-one was ever ill but that many were workshy. And what’s more, would he have been entirely wrong in this case? Gregor did in fact, apart from excessive sleepiness after sleeping for so long, feel completely well and even felt much hungrier than usual.

He was still hurriedly thinking all this through, unable to decide to get out of the bed, when the clock struck quarter to seven. There was a cautious knock at the door near his head. “Gregor”, somebody called - it was his mother - “it’s quarter to seven. Didn’t you want to go somewhere?” That gentle voice! Gregor was shocked when he heard his own voice answering, it could hardly be recognised as the voice he had had before. As if from deep inside him, there was a painful and uncontrollable squeaking mixed in with it, the words could be made out at first but then there was a sort of echo which made them unclear, leaving the hearer unsure whether he had heard properly or not. Gregor had wanted to give a full answer and explain everything, but in the circumstances contented himself with saying: “Yes, mother, yes, thank-you, I’m getting up now.” The change in Gregor’s voice probably could not be noticed outside through the wooden door, as his mother was satisfied with this explanation and shuffled away. But this short conversation made the other members of the family aware that Gregor, against their expectations was still at home, and soon his father came knocking at one of the side doors, gently, but with his fist. “Gregor, Gregor”, he called, “what’s wrong?” And after a short while he called again with a warning deepness in his voice: “Gregor! Gregor!” At the other side door his sister came plaintively: “Gregor? Aren’t you well? Do you need anything?” Gregor answered to both sides: “I’m ready, now”, making an effort to remove all the strangeness from his voice by enunciating very carefully and putting long pauses between each, individual word. His father went back to his breakfast, but his sister whispered: “Gregor, open the door, I beg of you.” Gregor, however, had no thought of opening the door, and instead congratulated himself for his cautious habit, acquired from his travelling, of locking all doors at night even when he was at home.

The first thing he wanted to do was to get up in peace without being disturbed, to get dressed, and most of all to have his breakfast. Only then would he consider what to do next, as he was well aware that he would not bring his thoughts to any sensible conclusions by lying in bed. He remembered that he had often felt a slight pain in bed, perhaps caused by lying awkwardly, but that had always turned out to be pure imagination and he wondered how his imaginings would slowly resolve themselves today. He did not have the slightest doubt that the change in his voice was nothing more than the first sign of a serious cold, which was an occupational hazard for travelling salesmen.

It was a simple matter to throw off the covers; he only had to blow himself up a little and they fell off by themselves. But it became difficult after that, especially as he was so exceptionally broad. He would have used his arms and his hands to push himself up; but instead of them he only had all those little legs continuously moving in different directions, and which he was moreover unable to control. If he wanted to bend one of them, then that was the first one that would stretch itself out; and if he finally managed to do what he wanted with that leg, all the others seemed to be set free and would move about painfully. “This is something that can’t be done in bed”, Gregor said to himself, “so don’t keep trying to do it”.

The first thing he wanted to do was get the lower part of his body out of the bed, but he had never seen this lower part, and could not imagine what it looked like; it turned out to be too hard to move; it went so slowly; and finally, almost in a frenzy, when he carelessly shoved himself forwards with all the force he could gather, he chose the wrong direction, hit hard against the lower bedpost, and learned from the burning pain he felt that the lower part of his body might well, at present, be the most sensitive.

☝︎

Go to first target

☝︎

Go to second target

☝︎

Go to third target

script.js

jQuery(document).ready(function($) {
  // We will use these objects a lot
  var body   = document.body,
      doc_el = document.documentElement,
      loc    = window.location;
  
  $('a[href^="#"]').on('click', function(evt) {
    var el,
        target_id,
        target_el,
        target_pos;
    // Make sure this is an internal hash link:
    // Check for hash
    // Compare anchor pathname to location pathname, but with a caveat; IE has a leading '/' in location, but not in anchor pathname
    // So, comparing the indexOf anchor pathname to the difference in lengths works for all browsers
    if (!this.hash || !this.pathname || (loc.pathname.length - this.pathname) === loc.pathname.indexOf(this.pathname)) {
      return;
    }
    // Prevent default behaviour
    evt.preventDefault();
    // Find out target
    target_id = this.hash;
    if (target_id[0] === '#') {
      target_id = target_id.substr(1);
    }
    target_el = document.getElementById(target_id);
    if (target_el !== null) {
      // Scroll target should be 20 pixels above the actual target
      target_pos = target_el.offsetTop - 20;
      if (target_pos < 0) {
        target_pos = 0;
      }
    }
    // Is body.style supported and do we have transitionProperty?
    if (typeof body.style === 'undefined' || typeof body.style.transitionProperty !== 'string') {
      // Fallback to jQuery animate
      $('html, body').animate({
        scrollTop: target_pos
      });
      return;
    }
    // Prevent any blink from the window width change
    body.style.overflowY = 'scroll';
    // Transfer scroll position to negative margin and reset scrollTop to 0
    body.style.marginTop = doc_el.scrollTop * -1 + 'px';
    doc_el.scrollTop = 0;
    // Set scrolling class for associated styles
    body.className += ' scrolling';
    // Change margin
    body.style.marginTop = -1 * target_pos + 'px';
    $(body).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() {
      body.className = body.className.replace(' scrolling', '');
      body.style.overflowY = '';
      body.style.marginTop = '';
      doc_el.scrollTop = target_pos;
    });
  });
});

style.sass

@import "compass"
@import "compass/typography/vertical_rhythm"

$color-accent: rgb(0, 150, 195)

+establish-baseline

body
  font-family: Georgia, serif
  margin: 0 auto 2em
  width: 94%
  max-width: 900px
  
  &.scrolling
    +transition-property(margin-top)
    +transition-duration(0.5s)

nav
  display: block
  text-align: center
    
a
  display: inline-block
  +adjust-font-size-to(65px)
  padding: 0.3em 0.3em
  background: $color-accent
  +background-image(linear-gradient(top, lighten($color-accent, 10%), $color-accent))
  color: white
  +text-shadow(0 1px 1px darken($color-accent, 10%))
  text-decoration: none
  +border-radius(50%)
  
  &:hover
    text-decoration: none
    background: darken($color-accent, 10%)
    +background-image(linear-gradient(top, $color-accent, darken($color-accent, 10%)))