JS平滑滚动锚标签
[英]JS Smooth Scroll AnchorTag
问题描述
I have a simple page where I've tried to get to different sections via anchor-links. 
我有一个简单的页面，我尝试通过锚链接到达不同的部分。 I justed wanted to get this "jumps" to smooth scrolls. 我只是想让这个“跳跃”平滑滚动。 After trying different jQuery-Code-Snippets I'm hoping that some of you could give me a tip, why it's still not working on my Django-Site. 在尝试了不同的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>
I've taken the JS-Code from CSS-Tricks.com 我从CSS-Tricks.com获得了JS代码
1 个解决方案
解决方案1
0 2018-07-31 17:50:00
Ok let's go, your problem is not related with Django as i edited, the only way that django maybe not allow you to run your code is if you place it in other file and not use static app right, so just for clearily i'll put some static code bellow: 好的，走吧，您的问题与我编辑的Django无关，django可能不允许您运行代码的唯一方法是将其放置在其他文件中，并且不使用静态应用程序，所以很明显，我会在下面放一些静态代码：
{% load static %}
Keep in mind inside your {% javascript_settings %} you need to have {% load static %} too 请记住，在您的{% javascript_settings %}内部，您也需要拥有{% load static %}
Keep in mind to use python manage.py collectstatic too 记住也要使用python manage.py collectstatic
This end anything related with Django that maybe impact your code... 这与Django相关的任何内容都可能影响您的代码...
Since in your snippet you placed django tags this will not run on snippet, so consider placing only the javscript code related as snippet (to run and check if this works or not) 由于在您的代码段中放置了django标记，因此不会在代码段上运行，因此请考虑仅将与之相关的javscript代码作为代码段放置（以运行并检查是否有效）
Considering that you js code works out side the django environment, you problem messed up some steps that i mentioned above, try place this code inline in your page instead of javascript file, if this dont work inline your code probabily dont work or you are missing some configuration. 考虑到您的js代码在django环境之外工作，您的问题弄乱了我上面提到的一些步骤，请尝试将此代码内联在页面而不是javascript文件中，如果此方法无法内联，则代码可能不起作用或您丢失了一些配置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.