Call me!
cell: 612-730-9540

Javascript Smooth Scroll

Project Winter 2014:

Chris Ferdinandi Smooth Scroll

I've been searching various JavaScript smooth scroll scripts for use on my longer pages like my Résumé or Changelog pages where there is a need to help the user get up and down those pages. I've been having some issues with smooth scroll scripts not working in IE until I tested Chris Ferdinandi's Smooth Scroll available at GitHub.

Click to test the smooth scroll.

The Code Reveal:

First: The HTML

This can be placed anywhere you want - I added mine just inside the open <body> that way the scroll would go to the top of the page ...


<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<a id="top"></a>
    <div id="content">
    Ooddles... 
    ... and ooddles... 
    of text here ...
    <p><a href="#top" class="scroll backToTop" data-speed="1000">Back to top</a></p>
    </div>
</body>
</html>

... or somewhere in the content.


<div id="content">
    <section>
        <p>Fix <a href="#other" class="scroll" data-speed="1000">"Other needed changes"</a></p>
        Ooddles... 
        ... and ooddles... 
        of text here ...
        <a id="other"></a>
    </section>
</div>

The href=#other" can be anything you want as long as the target link it is scrolling to matches.

class="scroll" needs to be used by the script or it won't work - so don't change that!

I found data-speed="1000" was the only attribute I need to add to the anchor that triggers the scroll for it to work. There are others available and you can test them out at Chris Ferdinandi's Smooth Scroll GitHub page. The data-speed value "1000" is milliseconds which equals 1 second.

Next: The Script

Link to the script in the bottom of the document before your final closing </div> tag.


<!-- http://cferdinandi.github.io/smooth-scroll/ -->
<script src="scripts/smooth-scroll.js"></script>
</div>
</body>
</html>

I believe the anchor element with the class="scroll" needs to be loaded on the page first so the smooth-scroll.js script can find that element already created to work with the script elements needed to make the scroll work.

Lastly: The CSS


.backToTop { display: inline-block; padding: 10px; border: 1px solid #000; background: #F5F5F5; }

I added my own CSS to style the back to top button by adding " backToTop" to the class. I didn't add this class anywhere the link was being used in an <a> tag in the copy or I'd end or with an odd boxed link in the middle of my copy.

See, the script works! Now go back to top.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.