jQuery offsetScroller

index.html

<div id="top">
  <h3>jQuery offsetScroller demo</h3>
  <div id="scroll-me">
    <a href="#box-1">Box 1</a> |
    <a href="#box-2">Box 2</a> |
    <a href="#box-3">Box 3</a> |
    <a href="#box-4">Box 4</a> |
    <a href="#box-5">Box 5</a> |
    <a href="#box-6">Box 6</a> |
    <a href="#box-7">Box 7</a> |
    <a href="#box-8">Box 8</a> |
    <a href="http://teamtopia.com">External link</a> |
    <a href="#{^&,]">Invalid link</a>
  </div>
</div>
<div id="buffer"></div>
<div class="box" id="box-1">
  <h1>Box 1</h1>
  <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-2">
  <h1>Box 2</h1>
  <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-3">
  <h1>Box 3</h1>
  <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-4">
  <h1>Box 4</h1>
  <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-5">
  <h1>Box 5</h1>
  <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-6">
  <h1>Box 6</h1>
  <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-7">
  <h1>Box 7</h1>
  <a href="#buffer">Back to top</a>
</div>
<div class="box" id="box-8">
  <h1>Box 8</h1>
  <a href="#buffer">Back to top</a>
</div>

jQuery offsetScroller.markdown

jQuery offsetScroller

Demo of jQuery offsetScroller

A Pen by Mason Hale on CodePen.

License.

script.js

// attach offsetScroll to target elements
$(document).ready(function() {
  $().offsetScroller.defaults.offsetPixels = 92;

  $('#scroll-me a').offsetScroller();
  $('.box a').offsetScroller({
    animationSpeed: 2000
  });

  $().offsetScroller.scrollToHash(window.location.hash);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/masonhale/jquery-offset-scroller/master/jquery-offset-scroller.js"></script>

style.css

body {
  background-color: #e2e2e2;
  margin: 0;
  padding: 1px;
  font-family: Helvetica, Arial, sans-serif;
}

.box {
  height: 400px;
  border: 8px solid #ccc;
  margin-bottom: 30px;
  padding: 30px;
}

#top {
  margin: 0;
  top: 0;
  position: fixed;
  height: 50px;
  padding: 20px;
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.5);
}

#top h3 {
  margin-top: 0px;
  padding: 0;
  margin-bottom: 10px;
}

#buffer {
  background-color: #ff0000;
  height: 90px;
  /* 50 height + 20x2 padding */
  padding: 0;
  margin: 0;
}