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');
});

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

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

<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很好，看起来我会怎么做，应该可以正常工作！

这是一个显示它正常工作的小提琴：

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

我认为，看看你的标记，发生的事情是body和html被设置为高度：100％但是如果#ContentContainer高于视口高度，那么你的html高度等于任何高度#ContentContainer，换句话说，没有什么可以实际滚动！

换句话说，不幸的是，我不认为你可以将身体设置为溢出：隐藏并拒绝修复#ContentContainer的高度 - 没有任何内容会滚动！

解决方案1 - 修复ContentContainer

如果将#ContentContainer的高度设置为视口的高度：

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

并添加overflow：滚动到#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/

Answer 2

以下是它对我有用的方法

$("html, body").animate({ scrollTop: $("#[NAME YOUR ELEMENT]").offset().top }, 500);

我们在mvc 4网站上运行

什么scrollTop（）可以阻止工作？

2 个答案: