jquery - 什么可以阻止 scrollTop() 工作？

Question

我需要滚动到屏幕上。这是我的代码

$('#MainNavigation .link a').click(function() {
    alert('start');
    var linkClicked = $(this).attr('data-opsection');
    var destination = parseInt( $('section[data-opsection="' + linkClicked +'"]').position().top );
    $("html").animate({scrollTop: destination}, 500 );
    alert('done');
});

显示了两个警报，所有变量值都正确，控制台没有记录错误但页面没有滚动。

这是我的标记，也许有人知道解决方案

<div id="ContentContainer">
    ...
    ...
    <section id="SID-20" data-opsection="commerce" class="onepage-section cf">
        ...
    </section> 

    <section id="SID-22" data-opsection="workout" class="onepage-section cf">
        ...
    </section> 

    <section id="SID-21" data-opsection="ueber-das-projekt" class="onepage-section wrapper cf">
        ...
    </section> 

    <section id="SID-23" data-opsection="kontakt" class="onepage-section cf">
        ...
    </section> 
    ...
    ...
</div>

这是 CSS 的一部分，我使用的是 Pushy所以 overflow-x: hidden 是必需的。但即使没有，它也不起作用。

html,
body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */
    height: 100%; /* fixes focus scrolling in Safari (OS X) */
    font-family: 'Titillium Web', sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: #879299; /*#465762;*/
    background: #465762;
}

#ContentContainer {
    position: relative;
    background: #ffffff;
}

菜单标记来了

<nav id="MainNavigation" class="pushy pushy-open">
    <ul>
        ...
        <li class="link ">
            <a href="javascript:void(0)" data-opsection="ueber-das-projekt">Über das Projekt</a>
        </li>

        <li class="link last">
            <a href="javascript:void(0)" data-opsection="kontakt">Kontakt</a>
        </li>
        ...
    </ul>
</nav>

Answer 1

你的 JS 很好，看起来像我会做的，应该可以正常工作!

这是一个显示它正常工作的 fiddle :

http://jsfiddle.net/sifriday/8euussh7/

我认为，看看你的标记，发生的事情是 body 和 html 设置为 height: 100% 但如果 #ContentContainer 高于视口(viewport)高度，那么你的 html 高度等于高度#ContentContainer，所以换句话说，实际上没有什么可以滚动的!

换句话说，不幸的是，我认为您不能将正文设置为溢出:隐藏并拒绝修复#ContentContainer 的高度 - 什么都不会滚动!

解决方案 1 - 修复 ContentContainer

如果将#ContentContainer 的高度设置为视口(viewport)的高度:

$("#ContentContainer").css({height: ($(window).height()-80) + "px"});

并添加溢出:滚动到#ContentContainer 的 CSS:

#ContentContainer {
    position: relative;
    background: #ffffff;
    overflow: scroll
}

这对你有用吗？此处演示:

http://jsfiddle.net/sifriday/8euussh7/3/

更新:更好的演示，带有导航标记:http://jsfiddle.net/sifriday/8euussh7/4/

解决方案 2 - 允许正文滚动

从正文中移除溢出:隐藏，您可以滚动正文，如下所示:

http://jsfiddle.net/sifriday/8euussh7/5/

解决方案 3 - 一个额外的包装器

如果您可以在正文内的标记中添加一个额外的包装器 div，那么我们可以使用它来处理滚动。正文可以保留 overflow-x:hidden，#ContentContainer 不需要调整大小。

http://jsfiddle.net/sifriday/8euussh7/7/