Edit in JSFiddle

<pre class="small">dummy content from <a href="http://heisenbergipsum.com/" target="_blank">heisenbergipsum.com</a>
</pre>
<section id="top">
    <!-- button - scroll to Jesse -->
    <a class="red" href="#two">Go to Jesse Pinkman</a>
    <!-- #Heisenberg -->
    <div id="one">
        <header>Heisenberg:</header>
        <p>Don't you see how great this is? You, you are a... Jesse look at me. You... are a blowfish. A blowfish! Think about it. Small in stature, not swift, not cunning. Easy prey for predators but the blowfish has a secret weapon doesn't he. Doesn't he? What does the blowfish do, Jesse. What does the blowfish do? The blowfish puffs up, okay?</p>
        <p>The blowfish puffs himself up four, five times larger than normal and why? Why does he do that? So that it makes him intimidating, that's why. Intimidating! So that the other, scarier fish are scared off. And that's you! You are a blowfish. You see it's just all an illusion. You see it's... it's nothing but air. Now... who messes with the blowfish, Jesse? You're damn right. You are a blowfish. Say it again. Say it like you mean it. You're a BLOWFISH!</p>
    </div>
    <!-- #Jesse Pinkman -->
    <div id="two">
        <header>Jesse Pinkman:</header>
        <!-- #button - scroll to Heisenberg -->
        <a class="top" href="#top">Back to Heisenberg</a>
        <p>This is glass grade. I mean, you got... Jesus, you got crystals in here 2 inches, 3 inches long. This is pure glass. You're a damn artist! This is art, Mr. White! Yeah, that's the thing, y'know? Your scumbag brother-in-law took my rainy day fund. Oh yeah. And tell that douche bag brother-in-law of yours to go towards the light.</p>
        <p>Got something for me? Is this a five or an S? Jesus, how the hell do you spell street wrong - S T R E A T? Spooge. Not mad dog, not diesel... let me get this straight, you got jacked by a guy named Spooge?</p>
    </div>
    <!-- #Hank Schrader -->
    <div id="three">
        <header>Hank Schrader:</header>
        <p>I think you know who Tuco Salamanca was. I think your car was there because you were there. Tuco had a bullet in him when I got there and I think you know something about that, too.</p>
        <p>Sky, the, um... I know it's none of my business, but uh... keeping him away from the kids? Whoa, whoa, no heavy lifting. I got it. Jesus, what you got in there - cinder blocks? If I have to guess, I'd say that's Spanish for asshole. You? No. Only shooting that you do is into a Kleenex.</p>
    </div>
</section>

// smooth scroll to anchor
$(document).ready(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {

        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

/* variables */

// colours
$grey: rgba(220, 231, 235, 1);
$lightgrey: rgba(220, 231, 235, 0.25);
$darkgrey: rgba(48, 69, 92, 0.15);
$black: rgba(48, 69, 92, 0.8);
$white: rgba(254, 255, 250, 1);
$blue: rgba(34, 190, 198, 1);
$green: rgba(140, 198, 63, 1);
$red: rgba(255,104,115,1);

// fonts
$sans: 'Ubuntu', sans-serif;
$heading: 'Source Sans Pro', sans-serif;

.transition {
	transition: all 0.25s ease-in-out;
}

body {
	background: $grey;
	
	pre {
		font-family: $sans;
		font-weight: 300;
		font-size: 0.4em;
		text-transform: uppercase;
		letter-spacing: 1em;
		padding: 2em;
		display: block;
		text-align: center;
		
		a {
			text-decoration: none;
			color: $red;
			@extend .transition;
			
			&:hover {
				color: $black;
			}
		}
	}
	
	section {
		position: relative;
		font-family: $sans;
		font-weight: 300;
		padding: 2em;
		
		header, a {
			padding: 1em 0;
		}

		a {
			position: relative;
			font-size: 0.9em;
			font-family: $sans;
			font-weight: 400;
			text-decoration: none;
			color: $blue;
			background: $white;
			margin-top: 1em;
			padding: 1em;
			border-radius: 0.1em;
			@extend .transition;
			
			&:hover {
				color: $black;
				background: $darkgrey;
			}
		}

		.red {
			position: relative;
			margin-top: 2em;
		}
		
		.top {
			float: right;
			top: 0;
		}

		header {
			font-family: $heading;
			font-weight: 700;
			font-size: 2em;
			text-transform: uppercase;
			line-height: 1;
			letter-spacing: -0.05em;
			float: left;
		}

		p {
			line-height: 1.7;
			margin-bottom: 1.5em;
			clear: both;
		}
		
		/* red content */
		#two {
			margin-top: 50em;
			color: $red;
		}
		#three {
			margin-bottom: 50em;
		}
	}
}