![](/img/trans.png)
[英]Material Design Lite and jQuery, smooth scroll not working
[英]Material Design Lite and jQuery, something is wrong with smooth scroll
昨天,我在这里问了类似的问题。
平滑滚动一直有效。
但是,使用平滑滚动时出了点问题。
代码在这里(此存储库包括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>
正确滚动
---从“顶部”开始平滑滚动时,滚动正常。
---但是,如果滚动的目标是“顶部”,则滚动可以正常工作。
滚动不正确
---当平滑滚动没有从“顶部”开始时,滚动无法正常工作。
---当离开位置和到达位置相同时,滚动不会正常工作。
我不知道为什么平滑滚动无法正常工作。
这个问题的解决方案在这里:
http://qiita.com/gonshi_com/items/33ac3df3ed98352c96b6#comment-87ad66f44229688fb638
jQuery的“ .offset()”无法通过CSS的“ zoom”属性获得正确的位置。
解决方法是这样的:
var target = $( '#target' ).offset().top;
↓
var target = $( '#target' ).get( 0 ).offsetTop
下村光彦(Mitsuhiko Shimomura)给出了正确的答案,我只是想将代码结合在一起以更加清楚。 我必须在.offsetTop
上添加- 130
,因为平滑滚动超出了HTML中的目标ID。 感谢您的帮助! 在使用此平滑滚动功能的地方查看我的应用程序 。
并记住要像这样向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");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.