onclick =“” javascript内联问题

Question

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...

<div class="navbar">
  <button type="button" id="clickme">scroll whit class</button>
  <button type="button" onclick="smoothScroll(third)" >not working yet</button>
 </div>

<div class="third" id="third">The start of the red section!</div>

and the smoothScroll function javascript:

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 > 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;
}

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

onclick="smoothScroll(second)"
onclick="smoothScroll(third)"
onclick="smoothScroll(fourth)"

and so on.... Here is the jsFiddle

Answer 1

var scrollContainer = document.getElementById(target);
target = document.getElementById(target);

then in your html

<button type="button" onclick="smoothScroll('third')" id="clickme">scroll whit onclick=""</button>

working fiddler https://jsfiddle.net/8ch4bon9/1

Answer 2

try using this one will help you with smooth scrolling and this is too easy to use

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

all what you need is to have a link

<a href="#third">not working yet</a>
<div id="third"></div>

this will work smoothly with you on any link binded to any div (href (for link) & id (for the div)) be careful for these 2 attributes and this will work fine

also you can find here in the following link a demo examle will explain to you more

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

Your Fiddle is different that the code provided in your question. Assuming your Fiddle is the most recent version, it does not work because you have two buttons with the same id which is not valid according to the HTML specification

<button type="button" id="clickme">scroll whit class</button>
<button type="button" id="clickme">scroll whit onclick=""</button>

As a result the event listener is only added to the first button as getElementById only returns one element:

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

You can solve this by adding a different id to the second button:

<button type="button" id="clickme">scroll whit class</button>
<button type="button" id="clickme1">scroll whit onclick=""</button>

And add a second listener:

function scrollDiv() 
{
    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();

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

document.getElementById('clickme').addEventListener('click', scrollDiv)
document.getElementById('clickme1').addEventListener('click', scrollDiv)

Or somewhat cleaner, you could add a class to the buttons and iterate over the result of document.getElementsByClassName