Anchor link not working HTML

Question

Anchor link not working HTML

Navigation

#1 by (2 votes)
#2 by (-1 votes)

1

Good afternoon, I'm doing a project site and it has those links that take you from one part of the page to the other, 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 is not working properly and I do not understand why, can anyone help me?

Test server: link

Could someone tell me also a script for him to go to the link by rolling the page more smoothly?

html css link

asked by anonymous 22.02.2018 / 17:57

2 answers

-1

You can use JQuery's animate function:

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

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

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

Take a look at this content: Scroll .

22.02.2018 / 18:04

Generate JSON from SQLite Convert JSON to Object with different structure

score 2 · Accepted Answer

It is not working because you are using the same name violao in the anchor and id of <div id="violao" class="valign-wrapper"> .

When you click the link, the HTML will first fetch id from div that has the same anchor name.

What should be done is to put a different name for the anchor or for 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

You can use "soft" scrolling using animate of jQuery, but the anchor must be div with id , as shown below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="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>