我正在尝试让 jQuery 动画滚动功能正常工作,以便当用户单击按钮时,它可以很好地向下滚动。我已经完成了几个教程,但我无法让动画工作。当我单击按钮时,它会跳转到相应的区域,但是很突然并且没有任何动画。这是我的代码:
jQuery:
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
HTML:
<ul class="list-inline intro-social-buttons">
<li><a href="#moreinfo" class="btn btn-default btn-lg"><i class="fa fa-rocket fa-fw"></i> <span class="network-name">Learn More</span></a>
</li>
</ul>
然后是:
<div class="content-section-a" id="moreinfo">
jquery-1.10.2.js 和 jQuery.min.map 均已链接并加载,没有问题。我做错了什么??
最佳答案
这可能是问题所在:
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
HTML anchor 默认跳转到“#”后名称/id 的元素。
此处显示:http://jsfiddle.net/avBst/1/
这可能意味着您的目标变量实际上并未返回项目,并且 jQuery 动画代码根本没有触发。
<小时/>下面是滚动到 ID 为“at_bottom”的指定 div 和返回顶部的链接的简单代码。
更多“一刀切”的答案:
说明:
创建具有自定义属性的链接:
<a class="scroll_to" data-more-info="section_one">Go To Section One</a>
和一个具有匹配 ID 的 div
<div id="section_one" class="section">
单击该链接后,提取属性值并滚动到具有该 ID 的 div。
$("a.scroll_to").click(function() {
var target = $(this).attr("data-more-info");
$("html, body").animate({ scrollTop: $("#"+target).offset().top - 50 }, "slow");
return false;
});
-50 是为了偏移 fiddle 的上边距。您可能不需要它。
这样您就不需要为所有滚动按钮等编写点击函数。
关于javascript - jQuery 动画滚动不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22886950/