javascript - 我的向下滚动效果有什么问题？

Question

我想在我的网站上使用向下滚动效果。我有几个 anchor 链接。用户在使用 anchor 链接时应该平滑地滚动到链接目标。

我的 HTML 代码如下所示(带 anchor 的链接):

<li class="indent1">
     <a href="#eigenschaften-dartscheibe" 
        onclick="test('eigenschaften-dartscheibe'); return false;">
             Welche Eigenschaften einer Dartscheibe sind entscheidend
     </a>
</li>

链接所针对的内容部分:

<h2 id="eigenschaften-dartscheibe" class="curtain">
   Welche Eigenschaften einer Dartscheibe sind entscheidend?
</h2>

和我的 JavaScript:

function scrollTo(to, duration) {
    if (document.body.scrollTop == to) return;
    var diff = to - document.body.scrollTop;
    var scrollStep = Math.PI / (duration / 10);
    var count = 0, currPos;
    start = element.scrollTop;
    scrollInterval = setInterval(function(){
        if (document.body.scrollTop != to) {
            count = count + 1;
            currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
            document.body.scrollTop = currPos;
        }
        else { clearInterval(scrollInterval); }
    },10);
}

function test(elID)
{
    var dest = document.getElementById(elID);
    scrollTo(dest.offsetTop, 500);
}

scoll效果不起作用...我的错误在哪里？有人可以帮助我吗？

最诚挚的问候

Answer 1

您在未定义元素时尝试访问它。使用开发者工具 -> 控制台(F12 或右键单击 -> 在 Chrome 上检查)。

将元素从 test 传递到 scrollTo:

function test(elID)
{
    var dest = document.getElementById(elID);
    // Here (dest)
    scrollTo(dest, dest.offsetTop, 500);
}

然后用它来检查滚动何时完成:

if ((document.body.scrollTop + window.innerHeight - element.offsetHeight) < to) {

1. 计算滚动
2. 添加窗口高度
3. 减去元素高度以确保到达底部

fiddle :https://jsfiddle.net/xdmfpjm2/