Javascript jQuery页面在执行动画之前跳到顶部
我正在尝试为我的网站制作一个向上滑动的动画。核心功能在那里,但我有一个问题,每当我点击一个元素(当页面不在顶部时),页面就会跳转到顶部和背面,然后按照预期制作动画。我已经研究了过去几天,但我的问题似乎是独特的,所以我决定问这个问题。这就是我得到的:Javascript jQuery页面在执行动画之前跳到顶部,javascript,jquery,scroll,page-jump,Javascript,Jquery,Scroll,Page Jump,我正在尝试为我的网站制作一个向上滑动的动画。核心功能在那里,但我有一个问题,每当我点击一个元素(当页面不在顶部时),页面就会跳转到顶部和背面,然后按照预期制作动画。我已经研究了过去几天,但我的问题似乎是独特的,所以我决定问这个问题。这就是我得到的: <div class="content"> <div class="inner_content"> <div id="first" class="first"></div>
<div class="content">
<div class="inner_content">
<div id="first" class="first"></div>
<div id="second" class="second"></div>
<div id="third" class="third"></div>
</div>
</div>
这个想法是点击一个div(第一个、第二个、第三个),然后由于导航栏的缘故,以130像素的偏移量向上滚动它。这是我的jQuery:
<script>
$( "div.first").click(function(){
$("html, body").animate({
"scrollTop": $("div.first").offset().top -130
}, 500);
$( "div.second").click(function(){
$("html, body").animate({
"scrollTop": $("div.first").offset().top -130
}, 500);
$( "div.third").click(function(){
$("html, body").animate({
"scrollTop": $("div.first").offset().top -130
}, 500);
</script>
$(“div.first”)。单击(函数(){
$(“html,body”).animate({
“scrollTop”:$(“div.first”).offset().top-130
}, 500);
$(“div.second”)。单击(函数(){
$(“html,body”).animate({
“scrollTop”:$(“div.first”).offset().top-130
}, 500);
$(“div.third”)。单击(函数(){
$(“html,body”).animate({
“scrollTop”:$(“div.first”).offset().top-130
}, 500);
问题如前所述。页面快速跳转到页面顶部,然后返回到上一个位置。之后,向上或向下滑动的动画非常干净平滑。我真的不知道问题出在哪里。我希望任何人都能帮助我。
提前感谢。您错过了一些结束括号
$(document).ready(function () {
$("div.first").click(function () {
$("html, body").animate({
"scrollTop": $("div.first").offset().top - 130
}, 500);
});
$("div.second").click(function () {
$("html, body").animate({
"scrollTop": $("div.first").offset().top - 130
}, 500);
});
$("div.third").click(function () {
$("html, body").animate({
"scrollTop": $("div.first").offset().top - 130
}, 500);
});
});
另外,我确实注意到您在
div.click上触发了动画,但是如果您在锚点上执行此操作,最好使用event.preventDefault()
看起来你的大括号/方括号在末尾缺少了一些。这本身就可以正常工作。你的实际代码中一定有其他东西。你有一个@JamesMontagne吗你有一个href为#?
的小括号。这正是重点。非常感谢。我两天前自己发现了,但是广告没有访问互联网来标记此问题已解决。无论如何,谢谢。