0

Bom dia! Não estou conseguindo deslizar para o titulo (ao clicar).

abaixo o código html:

$(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>

1
  • No caso você que que ao clicar no menu a pagina desça até o titulo ?
    – Bulfaitelo
    16/02/2019 às 13:37

1 Resposta 1

0

Não estou conseguindo deslizar para o titulo (ao clicar)

Normalmente adicionamos o id do alvo no href do link a e o navegador se encarrega de "encontrar o elemento e rolar até ele".

No seu código, o elemento começa invisível. Então, temos que forçar essa rolagem depois de tornar o elemento visível. Propriamente dito, ao concluir o fadeIn().

Adicionei o id dos elementos nos links e fiz a tal gambi no JavaScript. Veja como ficou:

$(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: aumentei um pouco a margem do .space a fim de facilitar a visualização.

3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .