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

Question

所以我在几页上使用简单的div id链接。

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

请参阅 - current site

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

如果你将浏览器向下拉小，它将进入智能手机风格......并且eveything正在那里工作......

任何帮助都会超级!!!

Answer 1

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

您可以将页面划分为单独的文件（以避免使用#links）或使用JavaScript来preventDefault beahaviour。我将深入研究后续解决方案的代码。请原谅我使用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. 选择以＃
2. 开头的属性a的{​​{1}}个元素
3. 点击时绑定操作：尝试选择href属性中引用的元素以及是否存在...
4. ...防止默认行为并滚动到正确的位置。

编辑：

在您的情况下，滚动应用于元素父级的父级。我错误地认为它是突然的父母。请参阅我的代码更新。