Anchor link not working HTML

Asked

Viewed 1,743 times

1

Good afternoon, I’m doing a project site and in it has those anchor links that lead from one part to the other of the page, but it’s not working right.

I put the link as 

  <a href="#violao">
    <div class="col s6 m3 valing-wrapper" id="">
      <div id="violao" class="valign-wrapper">
        <span id="cursosspan">Violão</span>
      </div>
    </div>
  </a>

And to call the link I put:

<a name="violao"></a>

But it’s not working properly and I don’t understand the pq, can anyone help me?

Test server: http://cliente.creativecode.art.br/TriadeGospel/cursos-triade-gospel.php

Someone could also refer me a script for it to go up the link rolling the page more smoothly?

html css link

  • from what I’ve seen in your domain you’re using url friendlies.. have you tried to call it that in href ? http://cliente.creativecode.art.br/TriadeGospel/cursos-triade-gospel.php#violao , I did this on your website and it worked.. that was the problem?

  • It would be interesting to separate the questions into different questions, otherwise the answer gets too wide

  • Pedro, the anchor is working, in this example of the guitar, I advise you to put the anchor to the image directly, this way #imagemesquerda

  • Pedro, I added in the answer a basic example of smooth scrolling using jQuery.

2 answers

2


It’s not working because you’re using the same name violao at the anchor and at id of <div id="violao" class="valign-wrapper">.

By clicking on the link, the HTML will search for the id of div that bears the same name as the anchor.

What should be done is to put a different name to the anchor or to the div.

Example:

<a href="#violao2">
    <div class="col s6 m3 valing-wrapper" id="">
      <div id="violao" class="valign-wrapper">
        <span id="cursosspan">Violão</span>
      </div>
    </div>
  </a>
<br><br><br><br><br><br><br><br><br><br>
<a name="violao2"></a>
Violão
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

Edit

Can use "smooth" scroll using animate jQuery, but the anchor needs to be a div with id, as an example below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript: $('html, body').animate({ scrollTop: $('#violao2').offset().top }, 600);">
    <div class="col s6 m3 valing-wrapper" id="">
      <div id="violao" class="valign-wrapper">
        <span id="cursosspan">Violão</span>
      </div>
    </div>
  </a>
<br><br><br><br><br><br><br><br><br><br>
<div id="violao2"></div>
Violão
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

  • Did not work the effect to get to the link

  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  • Weird huh ? I’m lost now

  • There was nothing here

  • What happens when you click on the link, nothing? Neither moves?

  • No dvd, no moving

  • On the website link in the question has how to see this?

  • The other links I made, according to what was passed by you above appear in the URL, but this Javascript ai did not work, nor appears anything in the URL

  • There’s a way to talk to you via wpp or fb?

Show 4 more comments

-1

You can use the function Animate jquery:

$("#Menu").click(function(){    
   $('html, body').animate({
         scrollTop: $("#elemento").offset().top
     }, 800);
});

You need to know the position of the element in which the scroll will be directed.

$("#elemento").offset().top

Take a look at this content: Scroll.

Browser other questions tagged html css link

You are not signed in. Login or sign up in order to post.