Material Design Lite 和 jQuery,平滑滚动出现问题

Mit*_*ura 1 html javascript jquery material-design-lite

昨天,我在这里问了类似的问题。

平滑滚动已经起作用了。
然而,当我使用它时,平滑滚动出现了问题。

代码在这里(此存储库包括 1 个 html 文件和 1 个图像文件): https:
//github.com/MitsuhikoShimomura/mdl-error

代码的一些重要部分。
平滑滚动:

<script>
  $(function(){
    $("a.smooth").click(function(e){
            e.preventDefault();
            var speed = 500;
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var nav_height = $(".mdl-layout__header-row").height();
            var position = target.offset().top - nav_height;
            $(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
            return false;
        });
    });
</script>
Run Code Online (Sandbox Code Playgroud)

正文内容:

<div class="layout-transparent mdl-layout mdl-js-layout">
    <header class="mdl-layout__header mdl-layout__header--transparent">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Sample</span>
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link smooth" href="#0">0</a>
                <a class="mdl-navigation__link smooth" href="#1">1</a>
                <a class="mdl-navigation__link smooth" href="#2">2</a>
                <a class="mdl-navigation__link smooth" href="#3">3</a>
                <a class="mdl-navigation__link smooth" href="#4">4</a>
            </nav>
        </div>
    </header>

    <!--Main contents -->
    <main class="mdl-layout__content">
        <ul class="ul-test">
            <li id="0">0</li>
            <li id="1">1</li>
            <li id="2">2</li>
            <li id="3">3</li>
            <li id="4">4</li>
        </ul>
    </main>
</div>
Run Code Online (Sandbox Code Playgroud)

正确的滚动
---当平滑滚动从“顶部”开始时,滚动工作正常。
---但是,如果滚动的目标是“顶部”,则滚动可以正常工作。

  • 从“顶级”到“#1”
  • 从“顶级”到“#3”
  • 从“#2”到“顶级”
  • ETC..

不正确的滚动
---当平滑滚动不是从“顶部”开始时,滚动将无法正确工作。
---当离开位置和到达位置相同时,滚动不起作用。

  • 从“#1”到“#2”
  • 从“#2”到“#4”
  • 从“#3”到“#3”
  • ETC..

我不知道为什么平滑滚动不能正常工作。

Mit*_*ura 5

这个问题的解决方案在这里:
\n http://qiita.com/gonshi_com/items/33ac3df3ed98352c96b6#comment-87ad66f44229688fb638

\n\n

jQuery 的“.offset()”无法通过 css 的“zoom”属性获得正确的位置。

\n\n

解决方案是这样的:

\n\n
var target = $( \'#target\' ).offset().top;\n
Run Code Online (Sandbox Code Playgroud)\n\n

\xe2\x86\x93

\n\n
var target = $( \'#target\' ).get( 0 ).offsetTop\n
Run Code Online (Sandbox Code Playgroud)\n