JS平滑滾動錨標簽
[英]JS Smooth Scroll AnchorTag
問題描述
我有一個簡單的頁面，我嘗試通過錨鏈接到達不同的部分。 我只是想讓這個“跳躍”平滑滾動。 在嘗試了不同的jQuery代碼片段后，我希望你們中的一些人能給我一個提示，為什么它仍然不能在我的Django-Site上運行。
// 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代碼
1 個解決方案
解決方案1
0 2018-07-31 17:50:00
好的，走吧，您的問題與我編輯的Django無關，django可能不允許您運行代碼的唯一方法是將其放置在其他文件中，並且不使用靜態應用程序，所以很明顯，我會在下面放一些靜態代碼：
{% load static %}
請記住，在您的{% javascript_settings %}內部，您也需要擁有{% load static %}
記住也要使用python manage.py collectstatic
這與Django相關的任何內容都可能影響您的代碼...
由於在您的代碼段中放置了django標記，因此不會在代碼段上運行，因此請考慮僅將與之相關的javscript代碼作為代碼段放置（以運行並檢查是否有效）
考慮到您的js代碼在django環境之外工作，您的問題弄亂了我上面提到的一些步驟，請嘗試將此代碼內聯在頁面而不是javascript文件中，如果此方法無法內聯，則代碼可能不起作用或您丟失了一些配置。
js滾動平滑
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.