Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="aims-form">
    <div class="aims-form__navigation">
      <ul>
        <li>
          <a onClick="scrollToAchor('section1', event)" class="aims-form__anchor">Section 1</a>
        </li>
        <li>
          <a onClick="scrollToAchor('section2', event)" class="aims-form__anchor">Section 2</a>
        </li>
        <li>
          <a onClick="scrollToAchor('section3', event)" class="aims-form__anchor">Section 3</a>
        </li>
        <li>
          <a onClick="scrollToAchor('section4', event)" class="aims-form__anchor">Section 4</a>
        </li>
      </ul>
    </div>
    <div class="aims-form__form">
      <section>
        <a name="section1"></a>
        Section 1 
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id laoreet est, sed luctus elit. Nunc condimentum ipsum justo, ac feugiat ipsum blandit sed. Nulla enim justo, vestibulum a rhoncus in, convallis in diam. Nam dapibus, velit ut condimentum finibus, enim lorem posuere augue, quis tempor ipsum nibh quis ante. Sed molestie ligula iaculis mauris ultrices, ut fermentum sapien congue. Pellentesque quam ex, mollis eu nulla vel, pretium elementum mi. Donec vel molestie quam, sit amet pulvinar diam. Quisque sit amet velit non arcu fringilla cursus. Aliquam in vestibulum orci, a pretium nisi.
      </section>
​
      <section>
        <a name="section2"></a>
        Section 2 
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id laoreet est, sed luctus elit. Nunc condimentum ipsum justo, ac feugiat ipsum blandit sed. Nulla enim justo, vestibulum a rhoncus in, convallis in diam. Nam dapibus, velit ut condimentum finibus, enim lorem posuere augue, quis tempor ipsum nibh quis ante. Sed molestie ligula iaculis mauris ultrices, ut fermentum sapien congue. Pellentesque quam ex, mollis eu nulla vel, pretium elementum mi. Donec vel molestie quam, sit amet pulvinar diam. Quisque sit amet velit non arcu fringilla cursus. Aliquam in vestibulum orci, a pretium nisi.
      </section>
​
      <section>
        <a name="section3"></a>
        Section 3 
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id laoreet est, sed luctus elit. Nunc condimentum ipsum justo, ac feugiat ipsum blandit sed. Nulla enim justo, vestibulum a rhoncus in, convallis in diam. Nam dapibus, velit ut condimentum finibus, enim lorem posuere augue, quis tempor ipsum nibh quis ante. Sed molestie ligula iaculis mauris ultrices, ut fermentum sapien congue. Pellentesque quam ex, mollis eu nulla vel, pretium elementum mi. Donec vel molestie quam, sit amet pulvinar diam. Quisque sit amet velit non arcu fringilla cursus. Aliquam in vestibulum orci, a pretium nisi.
      </section>
​
      <section>
      <a name="section4"></a>
        Section 4 
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id laoreet est, sed luctus elit. Nunc condimentum ipsum justo, ac feugiat ipsum blandit sed. Nulla enim justo, vestibulum a rhoncus in, convallis in diam. Nam dapibus, velit ut condimentum finibus, enim lorem posuere augue, quis tempor ipsum nibh quis ante. Sed molestie ligula iaculis mauris ultrices, ut fermentum sapien congue. Pellentesque quam ex, mollis eu nulla vel, pretium elementum mi. Donec vel molestie quam, sit amet pulvinar diam. Quisque sit amet velit non arcu fringilla cursus. Aliquam in vestibulum orci, a pretium nisi.
      </section>
  </div>
</div>
</body>
</html>
 
function scrollToAchor(where, event) {
  event.stopPropagation();
  var element = document.querySelector('.aims-form__form').querySelector('a[name="' + where + '"]');
  var to = element.offsetTop - 30;
  var from = document.querySelector('.aims-form__form').scrollTop
  var timeOut = 0;
​
  if(to >= from) {
    for(var i = from; i <= to; i+=5) {
      setTimeout(function () {
        document.querySelector('.aims-form__form').scrollTop = i;
      }, i/2);
    }
  } else {
​
    for(var k = from; k >= to; k-=5) {
      // I need to set the timeout Interval so the animation is smooth but it is really slow
      // with the above setInterval above we are counting up... How do I get this smooth
      timeOut = timeOut + (to + 15) / 2;
      
      setTimeout(function () {
        document.querySelector('.aims-form__form').scrollTop = i;
      }, timeOut);
    }
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MikeSavpro
0viewers