onclick="" javascript inline issue
<p>I have found a great pure javascript code for smooth scrolling function, but i dont know how to make it work whit the onclick inline function.
im sure its something simple, but a am very weak at javascript...</p>

<pre><code>&lt;div class="navbar"&gt;
  &lt;button type="button" id="clickme"&gt;scroll whit class&lt;/button&gt;
  &lt;button type="button" onclick="smoothScroll(third)" &gt;not working yet&lt;/button&gt;
 &lt;/div&gt;

&lt;div class="third" id="third"&gt;The start of the red section!&lt;/div&gt;
</code></pre>

<p>and the smoothScroll function javascript:</p>

<pre><code>var targetY;

document.getElementById('clickme').addEventListener('click', function() {

    smoothScroll(document.getElementById('third'));
});

window.smoothScroll = function(target) {

    var scrollContainer = target;

    headerSpace();

    do {
    scrollContainer = scrollContainer.parentNode;
    if (!scrollContainer) return;
    scrollContainer.scrollTop += 1;
    }
    while (scrollContainer.scrollTop == 0);

    do {
    if (target == scrollContainer) break;
    targetY += target.offsetTop;
    }
    while (target = target.offsetParent);

    scroll = function(c, a, b, i) {

        i++; if (i &gt; 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function() {scroll(c, a, b, i); }, 20);
    }

    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

function headerSpace() {

    var header = document.querySelectorAll('.navbar');
    targetY = -header[0].clientHeight;
}
</code></pre>

<p>As you see there is all ready getElement by id, but i want to remove it and make it working only whit inline </p>

<pre><code>onclick="smoothScroll(second)"
onclick="smoothScroll(third)"
onclick="smoothScroll(fourth)"
</code></pre>

<p>and so on....
Here is the <a href="http://jsfiddle.net/poqzb33o/2/" rel="nofollow">jsFiddle</a></p>