Smooth Scrolling with Velocity.js

smooth-scrolling-with-velocity-js.markdown

Smooth Scrolling with Velocity.js

Here's a smooth as butter page scrolling effect thanks to jQuery and the Velocity.js animation engine.

A Pen by Mark Hillard on CodePen.

License.

style.css

@import url("//fonts.googleapis.com/css?family=Advent+Pro:400,600,700");

html,body {
background-color:#f5f5f5;
color:#444;
font-family:"Advent Pro", arial, sans-serif;
letter-spacing:.02rem
}

*,::before,::after { box-sizing:border-box; }
:focus { outline:none; }

#top { padding:40px 30px; }
h1 { font-size:3em; font-weight:700; line-height:2em; }
p { font-size:1.5em; line-height:1.25em; margin:0 0 1.3em; }
a { transition:background-color 150ms ease; }

nav {
background-color:#444;
height:auto;
left:0;
position:fixed;
top:0;
width:100%;
}

nav ul { overflow:hidden; }
nav ul li { float:left; }

nav ul li a {
color:#f5f5f5;
display:block;
font-size:1.2em;
font-weight:600;
padding:10px 30px 14px;
text-align:center;
text-decoration:none;
}

nav ul li a:hover {
background-color:#393939;
}

#go-top {
background-color:#444;
bottom:0;
color:#f5f5f5 !important;
font-size:4em;
font-weight:700;
height:40px;
left:0;
padding:17px 0 0 26px;
position:fixed;
text-align:left;
text-decoration:none;
width:100%;
}

#go-top:hover {
background-color:#393939;
}

@media only screen and (max-width:480px) {
    h1 { font-size:2.5em; }
    p { font-size:1.25em; }
    #top { padding:40px 15px; }
    #go-top { padding:17px 0 0 11px; }
    nav ul li { width:25%; }
    nav ul li a { padding:10px 0 14px; width:100%; }
}

test.html

<div id="top">
    <nav>
        <ul>
            <li><a href="#cheese">Cheese</a></li>
            <li><a href="#bacon">Bacon</a></li>
            <li><a href="#coffee">Coffee</a></li>
            <li><a href="#beer">Beer</a></li>
        </ul>
    </nav>
    
    <h1 id="cheese">Cheese</h1>
    <p>I love cheese, especially when the cheese comes out of everybody's happy queso. St. agur blue cheese hard cheese red leicester cheese triangles jarlsberg melted cheese fondue bavarian bergkase. Cheese strings dolcelatte rubber cheese blue castello blue castello mascarpone cheese on toast fromage. Fondue pecorino cheese and wine cream cheese cheese and wine stinking bishop danish fontina cheesecake. Halloumi stilton cheese and biscuits roquefort monterey jack cheeseburger cheddar ricotta. Dolcelatte cheese and biscuits rubber cheese croque monsieur lancashire emmental feta cheesy feet. Feta danish fontina cheeseburger. Who moved my cheese taleggio swiss st. agur blue cheese st. agur blue cheese babybel cheese and biscuits cheese and biscuits. Cream cheese melted cheese fromage frais smelly cheese hard cheese edam. Bavarian bergkase say cheese roquefort. Who moved my cheese?</p>
    <p>Queso red leicester manchego. Pepper jack caerphilly who moved my cheese queso bocconcini stilton paneer gouda. Bavarian bergkase cut the cheese ricotta goat red leicester jarlsberg danish fontina cheese and wine. Pecorino danish fontina mascarpone roquefort cut the cheese manchego mozzarella croque monsieur. Airedale port-salut lancashire gouda brie macaroni cheese bavarian bergkase hard cheese. Roquefort cow goat bocconcini manchego lancashire chalk and cheese croque monsieur. Caerphilly danish fontina roquefort cheese on toast cut the cheese say cheese emmental mascarpone. Cheese on toast cheesy feet dolcelatte rubber cheese croque monsieur dolcelatte brie cheesecake. Hard cheese halloumi red leicester hard cheese taleggio gouda cheese on toast queso. Cheesy grin paneer fromage red leicester edam rubber cheese cheese and wine cheese strings. Cheese triangles fromage hard cheese fromage frais macaroni cheese rubber cheese stinking bishop caerphilly. Macaroni cheese red leicester jarlsberg. Cheesy feet fromage frais cow. Taleggio lancashire chalk and cheese. Cheese on toast goat smelly cheese queso everyone loves rubber cheese hard cheese cut the cheese. Cottage cheese smelly cheese cauliflower cheese. Roquefort cut the cheese cheese slices manchego monterey jack. </p>
    
    <h1 id="bacon">Bacon</h1>
    <p>Bacon ipsum dolor sit amet sausage pig tri-tip ham hock. Ground round swine ham hock bresaola fatback turducken sausage beef tail boudin sirloin kevin capicola. Ball tip biltong jerky, porchetta meatball ground round chuck shankle kevin. Ball tip corned beef flank, jowl pancetta beef ribs sausage pork loin fatback filet mignon venison shoulder ground round. Shoulder drumstick short ribs sausage, tenderloin chuck jerky tri-tip prosciutto pork belly bacon fatback frankfurter. Tri-tip hamburger prosciutto shankle pig leberkas. Beef meatball ground round pork kevin, ham hock pig boudin leberkas shoulder. Turkey prosciutto drumstick kielbasa capicola rump doner jowl tongue boudin sausage. Hamburger bacon drumstick brisket ball tip. Shankle corned beef chicken pork chop t-bone sausage, ham bacon pastrami beef ribs prosciutto pork tri-tip short loin drumstick. Ground round tri-tip.</p>
    <p>Pork loin shoulder salami tongue jerky, spare ribs hamburger brisket beef beef ribs cow capicola. Bacon turkey shank ball tip kevin pork loin bresaola rump chuck ground round jowl. Salami hamburger brisket pork, tenderloin flank strip steak jerky capicola kevin short loin swine frankfurter. Jerky kevin sausage pig, doner rump tail tri-tip boudin leberkas porchetta short ribs. Meatball kielbasa prosciutto drumstick shoulder, bacon tenderloin porchetta tail pastrami bresaola pig spare ribs capicola ham. Leberkas salami pancetta, corned beef shank hamburger ground round filet mignon drumstick frankfurter short loin capicola. Shank tri-tip turkey pancetta biltong tongue chicken pork belly bacon jerky doner capicola meatloaf pork chop. Swine landjaeger pork, capicola biltong leberkas short ribs kevin tri-tip. Porchetta landjaeger tenderloin beef ribs shankle. Beef ribs ham shankle landjaeger. Boudin rump ribeye flank filet mignon, kevin landjaeger prosciutto bresaola turkey sausage pig. Swine landjaeger pork, capicola biltong leberkas short ribs. Jowl corned beef tail strip steak ground round, pancetta spare ribs beef ribs pork loin t-bone turkey tongue ball tip. Salami kielbasa meatball, t-bone spare ribs filet mignon frankfurter pancetta sirloin sausage ball tip turkey jerky bresaola. Chuck short ribs corned beef jerky beef.</p>
    
    <h1 id="coffee">Coffee</h1>
    <p>Caffeine breve, acerbic cinnamon, steamed cultivar aged, et dripper aromatic, roast coffee cream dark arabica. In half and half, plunger pot milk, blue mountain, americano steamed blue mountain milk barista sweet blue mountain single shot. Est so froth, foam, white, single shot, siphon, caffeine, cultivar plunger pot milk body fair trade, seasonal lungo fair trade, cinnamon, strong decaffeinated as grounds plunger pot. Carajillo, chicory turkish café au lait redeye, macchiato mazagran redeye sit, rich arabica single shot sweet plunger pot aftertaste aroma skinny. Seasonal, a, fair trade, trifecta galão latte strong single origin latte blue mountain coffee, single origin cultivar, turkish, milk foam crema, acerbic that filter siphon mocha. Sugar, siphon flavour robusta cappuccino, beans eu extraction barista, flavour, in beans trifecta body variety in, decaffeinated, chicory lungo fair trade frappuccino whipped.</p>
    <p>Espresso pumpkin spice seasonal coffee sit ristretto et, arabica sweet cappuccino organic, caffeine lungo extraction aromatic single shot. Cinnamon bar java black fair trade bar chicory caramelization rich cream espresso french press spoon mazagran aromatic whipped cortado grinder blue mountain et crema. Affogato irish seasonal, whipped, skinny roast strong seasonal decaffeinated rich variety percolator siphon. Qui, java brewed wings, caramelization, skinny espresso aroma qui, filter, grinder cup milk and cappuccino. That body fair trade cappuccino, cup, shop instant trifecta aromatic, brewed mazagran aromatic acerbic cinnamon, qui aromatic black galão, instant, est caramelization french press java sweet. Cup in, lungo at, est so aged extraction strong, id rich espresso, cappuccino steamed, frappuccino, spoon foam and roast ristretto. Rich viennese espresso extraction, est, shop skinny white, cup strong, saucer cream caffeine froth est cream organic cup blue mountain plunger pot java. Single origin foam decaffeinated robusta bar pumpkin spice kopi-luwak sugar extraction. Extraction caramelization dripper beans aged, con panna frappuccino blue mountain coffee cream robusta. Ut cinnamon, frappuccino, crema spoon white body cappuccino. Wings ristretto rich to go et beans in cappuccino.</p>
    
    <h1 id="beer">Beer</h1>
    <p>Cask microbrewery adjunct units of bitterness bacterial. Priming all-malt double bock/dopplebock anaerobic autolysis, craft beer. Trappist carbonation kolsch, bunghole, sparge seidel, racking. Conditioning saccharification bacterial pint glass, mouthfeel rims heat exchanger. Ester rims yeast bitter. Barrel hops brew kettle, rims saccharification real ale wit, noble hops heat exchanger. Units of bitterness crystal malt. Pitching original gravity heat exchanger hoppy. Pub length, dunkle terminal gravity microbrewery wit additive, heat exchanger black malt. Fermentation wheat beer glass seidel hops. Craft beer units of bitterness ester ibu terminal gravity priming beer pitching bock! Bottle conditioning infusion mash tun rims. Lambic sparge, bitter carbonation black malt units of bitterness brewpub hydrometer carboy. Cask fermentation hard cider lambic aau bung pilsner mash. Lauter tun berliner weisse bunghole barrel.</p>
    <p>Bock imperial berliner weisse cask biere de garde reinheitsgebot aroma hops. Bottom fermenting yeast. draft (draught) additive mash tun. Aau. Bitter yeast black malt gravity seidel dry hopping pint glass. Brew fermentation, crystal malt bitter brewhouse rims. Carboy fermentation caramel malt enzymes, pub ibu, krausen, pilsner. Squares bitter anaerobic balthazar lagering real ale seidel imperial terminal gravity. Squares primary fermentation sour/acidic becher, amber hop back. Terminal gravity seidel cold filter bottom fermenting yeast acid rest. Hydrometer cask, ale shelf life, seidel. Final gravity mead aau fermentation. Crystal malt anaerobic anaerobic anaerobic scotch ale top-fermenting yeast adjunct tulip glass bitter dunkle. Alpha acid all-malt brewing priming conditioning tank imperial balthazar, noble hops wit. Dunkle microbrewery conditioning tank hop back trappist hard cider seidel. IPA dry hopping autolysis seidel cask conditioning primary fermentation. All-malt secondary fermentation hydrometer reinheitsgebot krug goblet conditioning. Bacterial barley, conditioning ester copper. Carboy, bright beer carbonation keg, lagering specific gravity pint glass secondary fermentation hoppy.</p>
    
    <a id="go-top" href="#top">^</a>
</div>

z-script.js

$(document).ready(function () {
    // bind click event to all internal page anchors
    $('a[href*="#"]').on('click', function (e) {
        // prevent default action and bubbling
        e.preventDefault();
        e.stopPropagation();
        // set target to anchor's "href" attribute
        var target = $(this).attr('href');
        // scroll to each target
        $(target).velocity('scroll', {
            duration: 500,
            offset: -40,
            easing: 'ease-in-out'
        });
    });
});

z-scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="//rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="//rawgit.com/julianshapiro/velocity/master/velocity.ui.min.js"></script>