gpt4 book ai didi

javascript - Material Design Lite 和 jQuery,平滑滚动不起作用

转载 作者:搜寻专家 更新时间:2023-11-01 04:50:07 24 4
gpt4 key购买 nike

我无法在 Google 的 Material Design Lite(MDL) 中使用 jQuery 的 .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");
});
});

简单的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>

此代码向我展示了日志“SMOOTH BEGIN”和“SMOOTH END”。但是,该链接像普通链接一样工作,而不是流畅。我怎样才能让 jQuery 与 MDL 一起工作?可能发生了一些冲突,但控制台没有显示任何内容。

最佳答案

您没有看到任何事情发生的原因是因为您正在 body 节点上滚动。 MDL 处理 mdl-layout__content 中的溢出,这是您应该滚动的元素。

所以这个-

$("html, body").animate({scrollTop:position}, speed, "swing");

现在变成了-

$(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");

这是一个代码笔示例 - http://codepen.io/mdlhut/pen/BNeoVa

关于javascript - Material Design Lite 和 jQuery,平滑滚动不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32035052/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com