jquery - 指向 div id 的简单链接使主包装器跳转

Question

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

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

见 -当前站点

问题是当我单击这些链接时，它们是主包装器中的一个神秘转变。但是 - 仅当浏览器高度低于 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. 单击时绑定操作：尝试选择href属性中引用的元素，如果它存在...
3. ...防止默认行为并滚动到适当的位置。

编辑：

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