单击边栏中的项目时防止主 window 滚动

Question

在我的网站 www.fsquare.be/diensten.html 中，我有一个边栏，在屏幕左侧的正文中有指向项目的链接。当我单击侧边栏中的某个项目时，整个 window 会滚动，这会导致目标标题滚动到看不见的地方。（如果你尝试过，你就会明白我的意思）。我怎样才能防止这种情况发生？

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

单击边栏中的项目时防止主 window 滚动

prevent main window from scrolling when an item in the sidebare is clicked

html

css

jquery