Question

我有一个简单的页面，我尝试通过锚链接访问不同的部分。我只是想让这个“跳跃”平滑滚动。在尝试了不同的jQuery代码片段之后，我希望你们中的一些人能给我一个提示，为什么它仍然不能在我的Django网站上使用。

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  

  <!-- JQuery -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <!-- Import Java -->
  {% load javascript_settings_tags %}
  <script type="text/javascript">{% javascript_settings %}</script>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- CSS -->
  {% load static %}

  <link rel="stylesheet" href="{% static 'css/style.css' %}">




  <title></title>
  <!-- Navbar -->
  <nav class="navbar sticky-top navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="#">
      <img src="/media/navbar/Nav_Logo_PG_681_4.svg" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'home' %}#info">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'home' %}#hoerproben">Hörproben</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'home' %}#band">Band</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'home' %}#anfragen">Anfrage</a>
        </li>

      </ul>
    </div>
  </nav>
</head>
<body>

  <div class="section" id="info">
  
  <div class="section" id="hoerproben">
    
  <div class="section" id="band">
        

    <!-- JavaScript Smooth Scroll -->
    <script src="{% static 'js/java.js' %}">

    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    </html>

我从CSS-Tricks.com上获取了JS代码

Answer 1

好吧，走吧，您的问题与我编辑的Django无关，django可能不允许您运行代码的唯一方法是将其放置在其他文件中，并且不使用静态应用程序，所以为了清楚起见我将在下面放一些静态代码：

{% load static %}

请记住，{% javascript_settings %}内也需要{% load static %}

请记住也要使用python manage.py collectstatic

这结束了与Django相关的所有可能影响您代码的事情...

由于在代码段中放置了django标记，因此该代码不会在代码段上运行，因此请考虑仅将与之相关的javscript代码作为代码段放置（以运行并检查是否有效）

考虑到您的js代码有效，在django环境之外，您的问题弄乱了我上面提到的一些步骤，请尝试将此代码内联而不是javascript文件放在页面中，如果这样做不起作用内联代码可能无法正常工作，或者您缺少某些配置。

JS平滑滚动锚标签

1 个答案: