相关疑难解决方法(0)

Material Design Lite和jQuery,平滑滚动无法正常工作

我无法使用Google的Material Design Lite(MDL)使用.animate方法.我使用MDL制作导航栏,但平滑滚动无法正常工作.

简单的jQuery代码是这样的:

$(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.offset().top;
                $("html, body").animate({scrollTop:position}, speed, "swing");
                console.log("SMOOTH END");
            });
        });
Run Code Online (Sandbox Code Playgroud)

简单的HTML代码是这样的:

<!-- Navigation (this is included header) -->
<nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Home</a>
    <a class="mdl-navigation__link smooth" href="#product">Product</a>
</nav>

<!--Main contents -->
<main class="mdl-layout__content">
    <div id="product"><!—-Contents-—></div>
</main>
Run Code Online (Sandbox Code Playgroud)

这段代码向我展示了日志,"SMOOTH BEGIN"和"SMOOTH END".但是,该链接作为普通链接,不像平滑.如何让jQuery使用MDL?也许正在发生一些冲突,但是控制台没有显示任何内容.

html javascript jquery conflicting-libraries material-design-lite

4
推荐指数
1
解决办法
4367
查看次数