无法在 JavaScript 上创建滚动效果

Question

我想创建一个外观，允许当用户按下“滚动”按钮时，页面将以滑动效果滚动。但它在我的页面上不起作用。我尝试将标记添加到我的 html 文件中，但它也不起作用。

我找到了一个脚本，但它不起作用。

我的错误在哪里？

首页.html

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script  src="{% static 'js/home.js' %}"></script>

    <link rel="stylesheet" href="{% static 'css/home.css' %}">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

.

.

.

    <section id="section01" class="demo">

      <h1> Welcome to PHARSYS  </h1>

      <h2>Scroll for Login or Signup</h2>

      <a href="#section02"><span></span></a>

    </section>

    <section id="section02" class="demo">

      <h1>Login</h1><br>

        <h2>Press the button to log in to the system.

      <br><br>

      </h2>

      <a href="#section03"><span></span>Scroll</a>

    </section>

    <section id="section03" class="demo">

      <h1>Signup</h1>

        <h2>Press the button to register to the system</h2>

    </section>

home.js

$(function() {

  $('a[href*=#]').on('click', function(e) {

    e.preventDefault();

    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');

  });

});

Answer 1

你的问题就在这里$('a[href*=#]').on('click', function(e) { ...要定位具有以您将使用的字符（而不是）href开头的属性的锚元素，这意味着以 开头，并且您还可以在搜索字符周围添加一些括号，如下所示#^*$('a[href^="#"]').on('click', function(e) { ...检查如下：注意：我特意给了 body 1000px 的高度，这样我们就可以在这里测试和运行。$(function() {&nbsp; $('a[href*="#"]').on('click', function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');&nbsp; });});body {&nbsp; height: 1000px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script&nbsp; src="{% static 'js/home.js' %}"></script><link rel="stylesheet" href="{% static 'css/home.css' %}"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script><section id="section01" class="demo">&nbsp; <h1> Welcome to PHARSYS&nbsp; </h1>&nbsp; <h2>Scroll for Login or Signup</h2>&nbsp; <a href="#section02"><span></span></a></section><section id="section02" class="demo">&nbsp; <h1>Login</h1><br>&nbsp; &nbsp; <h2>Press the button to log in to the system.&nbsp; <br><br>&nbsp; </h2>&nbsp; <a href="#section03"><span></span>Scroll</a></section><section id="section03" class="demo">&nbsp; <h1>Signup</h1>&nbsp; &nbsp; <h2>Press the button to register to the system</h2></section>您还可以使用*代替 作为通配符^，然后它将匹配#在其href属性中的任何位置具有字符的锚元素，而不仅仅是以 开头#。