Question

我正在创建一个测试网站，其中使用点击一个锚元素，将其带到页面的下一部分。我无法弄清楚当用户点击锚点时我的动画没有显示的原因。

$(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">&#x02228;</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>

This is a link to the code (codepen)

Answer 1

将$('a[href*=#]')更改为此$('a[href^="#"]')。你使用了错误的语法

Answer 2

查看控制台日志。有：

Uncaught Error: Syntax error, unrecognized expression: a[href*=#]

尝试使用：

$('a[href^="#"]')

滚动动画无效

2 个答案: