[英]jQuery scrollTop - animation not working
使用此处找到的示例,我正在尝试使用相同的工具。 当我点击导航链接时,它会跳转到选定的 div 而不是滑动/滚动。
HTML:
导航
<div class="span3">
<a href="#about-me"><img class="img-circle" src="http://placehold.it/200x200/e36b23/fff/&text=About+Me+"></a>
</div>
DIV
<div class="row-fluid" id="about-me"> ... </div>
JS:
<script>
$(document).ready(function(){
$('nav ul li a').click(function(){
var el = $(this).attr('href');
var elWrapped = $(el);
scrollToDiv(elWrapped,40);
return false;
});
function scrollToDiv(element, navheight){
var offset = element.offset();
var offsetTop = offset.top;
var totalScroll = offsetTop - navheight;
$('body,html').animate({
scrollTop: totalScroll
}, 1000);
}
});
</script>
所以它进入“点击”div,但不是幻灯片动画 - 这就是我想要的。 谁有想法?
您不会阻止默认行为,即直接导航(“跳转”)到锚点。 所以这里是这样的:
$('nav ul li a').click(function(evt){
evt.preventDefault();
...
});
您需要调整您的 jQuery 选择器以匹配您的 html 类 - 您使用的ul
/ li
与您引用的示例使用的不同,例如
$('.span3 a').click(function(){
在这里查看小提琴:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.