javascript - 滚动动画不起作用

标签 javascript jquery

我正在制作一个测试网站,用户单击一个 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">&#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)

最佳答案

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

关于javascript - 滚动动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40948392/

相关文章:

javascript - 捕获按Print Screen的用户并提交用户IP、论坛名称、成员(member)ID和URL

JavaScript 模块模式对比jQuery 插件

javascript - 强制显示一个 div 并覆盖全屏中的任何内容

javascript - 如何在php中使用js对象

javascript - MongoDB 更新文档在 foreach 循环中失败

javascript - 识别用户 vlc 插件安装?

jquery - 如何停止以前在 jquery 中发送的 ajax 调用

jquery - 从jquery ajax获取flask中的json

jquery - Json 下拉列表

javascript - 单击时从窗口顶部滚动到特定位置