onclick="" javascript 内联问题

Question

我找到了一个很棒的纯 javascript 平滑滚动功能代码，但我不知道如何使用 onclick 内联函数使其工作。我确定它很简单，但是我在 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>

和 smoothScroll 函数 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;
}

如您所见，id 的 getElement 已准备就绪，但我想删除它并使其仅内联工作

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

等等.... 这是 jsFiddle

Answer 1

尝试使用这个将帮助您平滑滚动，而且它太容易使用了

$(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;
      }
    }
  });
});

你所需要的只是拥有一个 link

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

在绑定到任何 div 的任何 link（href（对于 link）和 id（对于 div））上，这将与您一起顺利工作对于这 2 个属性，这将正常工作

您也可以在下面的此处找到link一个演示示例将向您解释更多

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

Answer 2

您的 Fiddle 与您问题中提供的代码不同。假设您的 Fiddle 是最新版本，它不起作用，因为您有两个具有相同 ID 的按钮，根据 HTML 规范

无效

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

因此，事件侦听器仅添加到第一个按钮，因为 getElementById 仅 returns 一个元素：

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

您可以通过向第二个按钮添加不同的 ID 来解决此问题：

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

并添加第二个侦听器：

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)

或者更简洁一些，您可以向按钮添加 class 并迭代 document.getElementsByClassName

的结果

Answer 3

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

然后在你的 html

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

工作提琴手 https://jsfiddle.net/8ch4bon9/1

onclick="" javascript 内联问题

onclick="" javascript inline issue

html

javascript

onclick