Material Design Lite和jQuery,平滑滚动有些问题
Material Design Lite and jQuery, something is wrong with smooth scroll
昨天,我在这里问过类似的问题。
和平滑滚动已经工作。
但是,当我使用平滑滚动时,有些问题。
代码在这里(这个存储库包括一个html文件和一个图像文件):
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>
正确滚动
—当平滑滚动从"顶部"开始时,滚动工作正确。
——然而,如果滚动的目标是"顶部",滚动工作正确。
- 从"top"到"#1"
- 从"top"到"#3"
- 从"#2"到"top"
- 等。
错误的滚动-当平滑滚动不是从"顶部"开始时,滚动不会正确工作。
—当离开位置和到达位置相同时,滚动不会工作不正确。
- 从"#1"到"#2" 从"#2"到"#4"
- 从"#3"到"#3"
- 等。
我不知道为什么平滑滚动不能正常工作
这个问题的解决方案是:
http://qiita.com/gonshi_com/items/33ac3df3ed98352c96b6评论- 87 ad66f44229688fb638
jQuery的".offset()"无法通过css的"zoom"属性获得正确的位置
解决方案如下:
var target = $( '#target' ).offset().top;
↓
var target = $( '#target' ).get( 0 ).offsetTop
Mitsuhiko Shimomura有正确的答案,我只是想将代码组合在一起以更清晰。我不得不将 - 130
添加到 .offsetTop
,因为平滑的滚动已经超过了我在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");
});
});
相关文章:
- Safari(Mac OS)上的jQuery平滑滚动问题
- jquery平滑滚动问题
- Wordpress中奇怪的滚动问题
- CSS 溢出的滚动问题:滚动 HTML
- 移动safari浏览器的滚动问题
- JQuery在滚动问题上添加类
- 多个引导模式的滚动问题
- jQuery自动完成滚动问题
- 可拖动弹出-滚动问题
- Jquery浏览器滚动问题
- 数据表垂直滚动问题
- IE 的画布外滚动问题
- jQuery fadeOut / fadeIn Chrome 中的滚动问题
- 基础 - 画布外滚动问题
- 灯箱演变防止窗口滚动问题
- 触摸事件的挖空事件绑定导致滚动问题
- 冻结列垂直滚动问题
- 单页滚动问题
- 三.JS - 火狐浏览器的滚动问题
- 在滚动问题上向下滑动菜单