单击sidebare中的项目时，防止主窗口滚动

Question

在我的网站www.fsquare.be/diensten.html中，我有一个侧边栏，其中包含指向屏幕左侧主要文本中项目的链接。当我单击侧边栏中的某个项目时，整个窗口会滚动，这会导致目标标题滚动到视线之外。 （如果你尝试它，你会明白我的意思）。 我怎样才能防止这种情况发生？

Answer 1

请尝试在javascript中使用.scrollTop，而不是使用超链接。这样的事情： -

document.getElementById("main").scrollTop = 200;

您可以像在此代码中完成的那样对滚动位置进行硬编码，也可以使用.offsetTop获取特定元素的位置，然后将其分配到200位。

Answer 2

由于您使用的是jQuery，因此可以执行以下操作：

$('#sidebar a').click(function () {
    $('#main').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500);
    return false;
});

我还添加了一个滚动动画，因为为什么不呢。

JSFiddle Demo