如何在Javascript中平滑滚动到div

我正在制作一个1页的基本网站，我有几个不同颜色的div，每个div都有不同的主题。我在这个网页的导航部分有一些链接，我希望这些链接能够平滑地滚动到受尊敬的div。我知道如何在html中使用链接并将href作为div名称，但这是一个即时更改，并将div名称添加到url中。如何在不向url中添加div名称的情况下顺利完成此操作？我正在寻找一个类似导航栏工作的方式。提前感谢您的帮助

另外，我对Javascript有着非常基本的了解，但我读到纯CSS无法实现此操作，因此如果可能，请解释代码。我还听说，使用JQuery可以更轻松地完成这项工作，因此了解这一点也很好。再次感谢

使用此代码

$('html, body').animate({scrollTop: $("#div-id").offset().top}, 2000);

---

下面的示例是关于jQuery的

$("button").click(function() {
    $('html,body').animate({
        scrollTop: $(".second").offset().top},
        'slow');
});

这是

---

下面的示例是关于纯JavaScript的

HTML部分：

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<div class="second" id="second">Hi</div>

JS部分：

window.smoothScroll = function(target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        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);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

---

试试

$（document）.scrollTop（$（'.'u div'）.offset（）.top）

你自己做过这方面的研究吗？这在网上是绝对有答案的。搜索谷歌的第一个结果。是的，我做了一些研究，我想我只是没有找到问题的正确措辞。感谢您提供此资源。@GregDevelopment我将您问题的确切标题输入谷歌，获得了大量不同的资源。在提问之前，你应该认真研究你的问题。附言：这是很久以前从stackoverflow中学到的！非常感谢。但是如果我想用链接激活滚动，我该怎么做呢？这似乎不需要任何东西来启动函数。您必须在单个页面中具有div的ID，单击链接调用JS函数，或将代码放入链接的

.on（）

单击中。谢谢！但是，如果我想用链接而不是像你使用的按钮来激活它，我该怎么做呢？你可以删除按钮标签，然后像这样添加锚定标签

window.smoothScroll = function(target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        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);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}