无法在 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() {

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

    e.preventDefault();

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

  });

});

body {

  height: 1000px;

}

<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>

您还可以使用*代替 作为通配符^，然后它将匹配#在其href属性中的任何位置具有字符的锚元素，而不仅仅是以 开头#。