jquery - 到 div id 的简单链接使主包装跳转

Question

所以我在几个页面上使用了指向 div id 的简单链接。

<a href="#mydiv">my link</div>

参见 - current site

问题是，当我单击这些链接时，它们是主包装器中的一个神秘转变。但是 - 仅当浏览器的高度小于 800 时。我很难过。

如果您将浏览器向下拖动到很小，它将进入智能手机风格...一切都在那里工作...

任何帮助都会很棒!!!

Answer 1

正如我在评论中所说，这是#links 的正常行为。单击后，页面将滚动，以便引用的元素位于其顶部。仅使用 CSS 无法解决您的问题。

您可以将页面分成单独的文件(以避免使用#links)或使用 JavaScript 来preventDefault 行为。我将深入研究稍后解决方案的代码。请原谅我使用 jQuery，但它在这里要快得多。

因此，代码:http://jsfiddle.net/vL6Xn/3/

$('a[href^="#"]').each(function () {
    var sel = $(this).attr('href');
    $(this).click(function (e) {
        if ($(sel).length) {
            e.preventDefault();
            var $cont = $(sel).parent().parent();
            var scrollVal = $cont.scrollTop() + $(sel).position().top;
            $cont.scrollTop(scrollVal);
        }
    });
});

它的作用是:

1. 选择a元素，其属性href以#开头
2. 单击时绑定(bind)操作:尝试选择 href 属性中引用的元素，如果它存在...
3. ...防止默认行为并滚动到适当的位置。

编辑:

在您的情况下，滚动应用于元素父级的父级。我错误地认为它只是 parent 。查看我的代码更新。