1

昨日、ここで同様の質問をしました。

そして、スムーズスクロールが機能しました。
しかし、使ってみるとスムーズスクロールがおかしい。

コードはこちら (このリポジトリには 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>

本体内容：

<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>

正しいスクロール
---スムーズなスクロールが「上」から始まる場合、スクロールが正しく動作します。
---しかし、スクロールのゴールが「上」の場合、スクロールは正しく動作します。

  • 「トップ」から「ナンバーワン」へ
  • 「トップ」から「#3」へ
  • 「#2」から「トップ」へ
  • 等..

スクロールが正しく
ない ---スムーズなスクロールが「上」から開始されない場合、スクロールが正しく動作しません。
---出発位置と到着位置が同じ場合、スクロールが正しく動作しません。

  • 「#1」から「#2」へ
  • 「#2」から「#4」へ
  • 「#3」から「#3」へ
  • 等..

スムーズスクロールが正しく機能しない理由がわかりません。

4

2 に答える 2

5

この問題の解決策はこちら:
http://qiita.com/gonshi_com/items/33ac3df3ed98352c96b6#comment-87ad66f44229688fb638

jQuery の「.offset()」は、css の「zoom」プロパティで正しい位置を取得できません。

解決策はこれです： 

var target = $( '#target' ).offset().top;

↓</p> 

var target = $( '#target' ).get( 0 ).offsetTop
于 2015-08-18T05:55:27.550 に答える