我正在制作一个测试网站,用户单击一个 anchor 元素,将他们带到页面的下一部分。我不明白为什么当用户单击 anchor 时我的动画没有显示。
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 2000);
});
});
<head>
<link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet">
</head>
<body>
<header>
<h1 id="section00" class="siteName selector">Travel More</h1>
<h2 class="downPage"><a href="#section01" class="down1">∨</a></h2>
</header>
<section id="section01" class="content selector"><a href="#section02" class="down1">Second</a></section>
<section id="section02" class="content selector">
<a class="down1" href="#section03">Third</a>
</section>
<section id="section03" class="content selector">
<a class="down1" href="#section00">Last</a>
</section>
<footer><p>Travel More 2016</p></footer>
</body>
最佳答案
将 $('a[href*=#]')
更改为 $('a[href^="#"]')
。您使用了错误的语法
关于javascript - 滚动动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40948392/