JS Smooth Scroll AnchorTag
Question
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.
// 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
1 answers
solution1
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:
{% load static %}
Keep in mind inside your {% javascript_settings %} you need to have {% load static %} too
Keep in mind to use python manage.py collectstatic too
This end anything related with Django that maybe impact your code...
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)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.