没有 jQuery 的平滑滚动锚链接

Question

是否可以使用平滑滚动来锚定链接但 没有 jQuery ？我正在创建一个新站点，我不想使用 jQuery 。

原文由 drozdzynski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用此处的函数： JavaScript animation 并修改它以修改属性（不仅是样式的属性），您可以尝试这样的事情：

演示：http: //jsfiddle.net/7TAa2/1/

只是说…

 function animate(elem, style, unit, from, to, time, prop) {
  if (!elem) {
    return;
  }
  var start = new Date().getTime(),
    timer = setInterval(function() {
      var step = Math.min(1, (new Date().getTime() - start) / time);
      if (prop) {
        elem[style] = (from + step * (to - from)) + unit;
      } else {
        elem.style[style] = (from + step * (to - from)) + unit;
      }
      if (step === 1) {
        clearInterval(timer);
      }
    }, 25);
  if (prop) {
    elem[style] = from + unit;
  } else {
    elem.style[style] = from + unit;
  }
}

window.onload = function() {
  var target = document.getElementById("div5");
  animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};

 div {
  height: 50px;
}

 <div id="div1">asdf1</div>
<div id="div2">asdf2</div>
<div id="div3">asdf3</div>
<div id="div4">asdf4</div>
<div id="div5">asdf5</div>
<div id="div6">asdf6</div>
<div id="div7">asdf7</div>
<div id="div8">asdf8</div>
<div id="div9">asdf9</div>
<div id="div10">asdf10</div>
<div id="div10">asdf11</div>
<div id="div10">asdf12</div>
<div id="div10">asdf13</div>
<div id="div10">asdf14</div>
<div id="div10">asdf15</div>
<div id="div10">asdf16</div>
<div id="div10">asdf17</div>
<div id="div10">asdf18</div>
<div id="div10">asdf19</div>
<div id="div10">asdf20</div>

原文由 Ian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

扩展这个答案： https ://stackoverflow.com/a/8918062/3851798

在定义了你的 scrollTo 函数之后，你可以在函数中传递你想要滚动到的元素。

 function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

如果你有一个 id=“footer” 的 div

 <div id="footer" class="categories">…</div>

在您运行滚动的脚本中，您可以运行它，

 elmnt = document.getElementById("footer");
scrollTo(document.body, elmnt.offsetTop, 600);

你有它。没有 jQuery 的平滑滚动。实际上，您可以在浏览器的控制台上使用该代码，并根据自己的喜好对其进行微调。

原文由 Tejas Anil Shah 发布，翻译遵循 CC BY-SA 3.0 许可协议