0

So all the solutions that I can find use jQuery. I understand it might be easier to use jQuery, but does anyone know of a pure Javascript method of anchor scrolling?

Codepen to get started: http://codepen.io/mildrenben/full/Kwwdzb/[1][1]

HTML:

<nav>
   <ul>
     <li><a href="#section-one">Section One</a></li>
     <li><a href="#section-two">Section Two</a></li>
     <li><a href="#section-three">Section Three</a></li>
     <li><a href="#section-four">Section Four</a></li>
     <li><a href="#section-five" id="link">Section Five</a></li>
  </ul>
</nav>
<main>
  <h1 id="section-one">SECTION ONE</h1>
  <h1 id="section-two">SECTION TWO</h1>
  <h1 id="section-three">SECTION THREE</h1>
  <h1 id="section-four">SECTION FOUR</h1>
  <h1 id="section-five">SECTION FIVE</h1>
</main>

CSS:

html, body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  font-family: sans-serif;
}

h1 {
  margin-bottom: 300px;
}

nav {
  width: calc(20% - 60px);
  height: calc(100% - 60px);
  background: aquamarine;
  float: left;
  padding: 30px;
  overflow-y: scroll;
}

nav ul {
  list-style: none;
}

nav li {
  margin: 30px 0;
}

main {
  width: calc(80% - 60px);
  height: calc(100% - 60px);
  background: darkseagreen;
  float: left;
  overflow-y: scroll;
  padding: 30px;
}

main p {
  width: 35%;
  margin: 10px 0 70px;
}
mildrenben
  • 3,675
  • 5
  • 23
  • 37
  • And by anchor scrolling I assume you mean smooth scrolling to anchors? How much control such as speed, bounce, offset do you need? – caffeinated.tech Nov 20 '14 at 15:19
  • Yeah I mean smooth scrolling. Not too much control, no bounce needed. It'd be nice to have something like the CSS transition ease-in-out and an offset. Thanks! – mildrenben Nov 20 '14 at 15:26
  • There's been an awful lot of duplicates of this, they are your best bet: http://stackoverflow.com/questions/17733076/smooth-scroll-anchor-links-without-jquery , there are more duplicates in the comments on the correct answer – caffeinated.tech Nov 20 '14 at 15:31

0 Answers0