Material Design Lite 和 jQuery，平滑滚动有问题答案

【问题标题】：Material Design Lite and jQuery, something is wrong with smooth scrollMaterial Design Lite 和 jQuery，平滑滚动有问题
【发布时间】：2015-08-17 15:29:01
【问题描述】：

昨天，我问了类似的问题，here。

平滑滚动已经奏效。
但是，我使用的时候平滑滚动有问题。

代码在这里（此存储库包括 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>

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

从“顶部”到“#1”
从“顶部”到“#3”
从“#2”到“顶部”
等等..

滚动错误
---当平滑滚动不从“顶部”开始时，滚动不正确。
---当离开位置和到达位置相同时，滚动不会出错。

从“#1”到“#2”
从“#2”到“#4”
从“#3”到“#3”
等等..

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

【问题讨论】：

我认为您应该将代码的重要部分直接添加到您的问题中。
@m02ph3u5 谢谢！我更新了。

标签： javascript jquery html material-design-lite

【解决方案1】：

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

jQuery 的 ".offset()" 无法使用 css 的 "zoom" 属性获得正确的位置。

解决办法是这样的：

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

↓

var target = $( '#target' ).get( 0 ).offsetTop

【讨论】：

【解决方案2】：

Mitsuhiko Shimomura 有正确的答案我只是想将代码组合在一起以更清晰。我不得不将 - 130 添加到 .offsetTop，因为平滑滚动超出了我在html 中的目标ID。感谢您的帮助！请参阅我使用此平滑滚动功能的app。

记得像这样在 html 中为锚点添加平滑类

<a class="smooth" href="#scrollToId">Target</a> 
<div id="scrollToId">Target</div>

$(function(){
    $('a.smooth').click(function(){
        console.log("SMOOTH BEGIN");
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.get( 0 ).offsetTop - 130;
        $(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
        console.log("SMOOTH END");
    });
});

【讨论】：