Question

我正在制作一个1页的基本网站，其中我有几个不同颜色的div，每个都有不同的主题。我在这个网页的导航部分中有链接，我想要链接到SMOOTHLY滚动到受尊重的div。我知道如何通过使用链接并将href作为div名称在html中执行此操作，但这是一个即时更改，并将div名称添加到URL。如何在不向网址添加div名称的情况下顺利完成此操作？我希望make类似于导航栏在http://www.knowroaming.com上的工作方式。提前感谢您的帮助！

P.S。我对Javascript有基本的了解，但我读到这个动作不可能用纯CSS，所以请尽可能解释代码。我也听说过使用JQuery可以更轻松地完成这项工作，所以这也很好。再次感谢！

Answer 1

使用此代码，

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

Answer 2

以下示例在jQuery上

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

这是Jsfiddle

以下示例适用于纯JavaScript。

HTML部分：

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

CSS部分：

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

JS Part：

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

如何在Javascript中顺利滚动到div

2 个答案: