Problem with anchor link

Asked

Viewed 66 times

0

Good morning! I am unable to slide to the title (by clicking).

below the html code:

$(document).ready(function() {
   

    $("#menu li a").on('click', function(e) {
        e.preventDefault();
    
        var page = $(this).data('page');
        $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
        });
    });
    
    $("#menu li").on('click', function(){
         $(this).siblings().removeClass('active');
         $(this).addClass('active');
    
    });
});
#menu li {
   display: inline-block;
   width: 200px;
   height: 50px;
   background: green;
   line-height: 10px;
   text-align: center;
   font-size: 18px;
   margin: 2px 0;
}

#menu li a{
  color: #fff;
  text-decoration: none;  
}

.space{
  margin: 200px 0;
}

#pages section header{
  font-size: 24pt;
  margin-bottom: 1em;
}

.page{display: none;}

.hide {
    display: none;
}

.active{
  background: red !important; 
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>


<ul id="menu">
    <li><a data-page="historia" href="#"><h3> História </h3> </a></li>
    <li><a data-page="requisitos" href="#"><h3> Requisitos </h3> </a></li> 
    <li><a data-page="prints" href="#"><h3> Screenshots </h3> </a></li>
</ul>

<div class="space"></div>

<div id="pages">
        <!-- Início seção história-->
        <section id="historia" class="page" data-page="historia">
                <header> História </header>
                <p> se passando duzentos anos depois dos eventos de Oblivion. Na premissa de Skyrim, o                         Império começa a ceder territórios para as nações Élficas uma vez governadas, porque                       não há nenhum herdeiro para o trono do Imperador. Os Blades não tem ninguém para                           defender, e gradualmente morreram, foram assassinados ou se isolaram do resto do mundo.                     Depois do assassinato do Rei de Skyrim, uma guerra civil irrompe entre as raças nativas                     Nord — sendo a maioria aqueles que desejavam que Skyrim se separe do Império, e o resto                    sendo aqueles que desejam que Skyrim permaneça no Império.
                </p>
          </section>
          <!-- Fim seção história-->
    
          <!-- Início seção Requisitos--> 
          <section id="requisitos" class="page hide" data-page="requisitos">
                <header> Requisitos </header>
                
                <p> MÍNIMOS:</p>
                <p>SO: Windows 7/8.1/10 (64-bit Version)</p>
                <p>Processador: Intel i5-750/AMD Phenom II X4-945</p>
                <p>Memória: 8 GB de RAM</p>
                <p>Placa de vídeo: NVIDIA GTX 470 1GB /AMD HD 7870 2GB</p>
                <p>Armazenamento: 12 GB de espaço disponível</p>

                <br/>

                <p>RECOMENDADOS:</p>
                <p>SO: Windows 7/8.1/10 (64-bit Version)</p>
                <p>Processador: Intel i5-2400/AMD FX-8320</p>
                <p> Memória: 8 GB de RAM</p>
                <p> Placa de vídeo: NVIDIA GTX 780 3GB /AMD R9 290 4GB</p>
                <p>Armazenamento: 12 GB de espaço disponível</p>
          </section>
          <!-- Fim seção requisitos-->
         
          <!-- Início seção printscreens-->
          <section id="prints" class="page hide" data-page="prints">
                <header> Printscreens </header>
                <img src="http://mmosgame.com/downloads/The-Elder-Scrolls-V-Skyrim2.jpg"/>
		            <img src="http://mmosgame.com/downloads/The-Elder-Scrolls-V-Skyrim3.jpg"/>
         </section> 
         <!-- FIM seção história-->
    </div>

javascript html

  • In case you click on the menu the page descends to the title ?

1 answer

0


I am unable to slide to the title (by clicking)

We usually add the id of the target in the href of the link a and the browser takes care to "find the element and scroll to it".

In your code, the element starts invisible. So, we have to force this scrolling afterward to make the item visible. On completion of the fadeIn().

I added the id of the elements in the links and I Gambi in Javascript. See how it looked:

$(document).ready(function() {
    $("#menu li a").on('click', function(e) {
        e.preventDefault();
        let target_id = $(this).attr('href');
        var page = $(this).data('page');
            $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
                $(this).addClass('hide');
                $('#pages .page[data-page="'+page+'"]').fadeIn('slow', function(){
                  $(this).removeClass('hide');
                  window.location.href = target_id;
                });
            });
    });

    $("#menu li").on('click', function(){
         $(this).siblings().removeClass('active');
         $(this).addClass('active');
    });
});
#menu li {
   display: inline-block;
   width: 200px;
   height: 50px;
   background: green;
   line-height: 10px;
   text-align: center;
   font-size: 18px;
   margin: 2px 0;
}

#menu li a{
  color: #fff;
  text-decoration: none;  
}

.space{
  margin: 800px 0;
}

#pages section header{
  font-size: 24pt;
  margin-bottom: 1em;
}

.page{display: none;}

.hide {
    display: none;
}

.active{
  background: red !important; 
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>


<ul id="menu">
    <li><a data-page="historia" href="#historia"><h3> História </h3> </a></li>
    <li><a data-page="requisitos" href="#requisitos"><h3> Requisitos </h3> </a></li> 
    <li><a data-page="prints" href="#prints"><h3> Screenshots </h3> </a></li>
</ul>

<div class="space"></div>

<div id="pages">
        <!-- Início seção história-->
        <section id="historia" class="page" data-page="historia">
                <header> História </header>
                <p> se passando duzentos anos depois dos eventos de Oblivion. Na premissa de Skyrim, o                         Império começa a ceder territórios para as nações Élficas uma vez governadas, porque                       não há nenhum herdeiro para o trono do Imperador. Os Blades não tem ninguém para                           defender, e gradualmente morreram, foram assassinados ou se isolaram do resto do mundo.                     Depois do assassinato do Rei de Skyrim, uma guerra civil irrompe entre as raças nativas                     Nord — sendo a maioria aqueles que desejavam que Skyrim se separe do Império, e o resto                    sendo aqueles que desejam que Skyrim permaneça no Império.
                </p>
          </section>
          <!-- Fim seção história-->
    
          <!-- Início seção Requisitos--> 
          <section id="requisitos" class="page hide" data-page="requisitos">
                <header> Requisitos </header>
                
                <p> MÍNIMOS:</p>
                <p>SO: Windows 7/8.1/10 (64-bit Version)</p>
                <p>Processador: Intel i5-750/AMD Phenom II X4-945</p>
                <p>Memória: 8 GB de RAM</p>
                <p>Placa de vídeo: NVIDIA GTX 470 1GB /AMD HD 7870 2GB</p>
                <p>Armazenamento: 12 GB de espaço disponível</p>

                <br/>

                <p>RECOMENDADOS:</p>
                <p>SO: Windows 7/8.1/10 (64-bit Version)</p>
                <p>Processador: Intel i5-2400/AMD FX-8320</p>
                <p> Memória: 8 GB de RAM</p>
                <p> Placa de vídeo: NVIDIA GTX 780 3GB /AMD R9 290 4GB</p>
                <p>Armazenamento: 12 GB de espaço disponível</p>
          </section>
          <!-- Fim seção requisitos-->
         
          <!-- Início seção printscreens-->
          <section id="prints" class="page hide" data-page="prints">
                <header> Printscreens </header>
                <img src="http://mmosgame.com/downloads/The-Elder-Scrolls-V-Skyrim2.jpg"/>
		            <img src="http://mmosgame.com/downloads/The-Elder-Scrolls-V-Skyrim3.jpg"/>
         </section> 
         <!-- FIM seção história-->
    </div>

PS: I slightly increased the margin of .space in order to facilitate viewing.

Browser other questions tagged javascript html

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