0

Como aplicar efeito smooth no scroll scroll de âncora da página? Alguém pode me ajudar?

$(document).ready(function() {
  //Função que mostra o conteúdo de acordo com o botão clicado (menu)
  $("#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;
      });
    });
  });

  //Função que insere a classe Active no botão que foi clicado (menu)
  $("#menu li").on('click', function() {
    $(this).siblings().removeClass('actives');
    $(this).addClass('actives');
  });
});
<div class="store container">
  <ul id="menu">
    <li>
      <a data-page="sobre" href="#sobre">
        <h2> Sobre </h2>
      </a>
    </li>
  </ul>
</div>


<div id="pages">
  <section id="sobre" class="page style" data-page="sobre">
    <header>
      <h2> aaaa </h2>
    </header>
    <p class="text">aaaaaaaaaaaaaaaa.</p>
  </section>
</div>

1

1 Resposta 1

2

Primeiro que o:

window.location.href = target_id;

Irá levar diretamente ao elemento, sem o scroll, mas creio que isso já imaginava

Segundo, com todo respeito e me perdoem de antemão, mas a resposta do EliseuB esta errada, não tem sentido passa o valor do ID para o scrollTop:

let target_id = $(this).find('a').attr('id_ou_name');

$('html, body').animate({scrollTop: target_id}, 300);

scrollTop espera um numero e não uma referencia ID de um elemento HTML, por isto não funciona, o correto seria pegar o offset().top do elemento que deseja que o scroll atinga, segue a documentação:

Aqui no proprio site já tem um exemplo bastante intuitivo de como é o minimo correto:

Apesar de que tem como melhorar, como por exemplo o seletor poderia ser algo como:

 a[href^="#"]

Para afetar somente links que comessem com HASH, para resumir o seu código poderia ficar assim:

$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
  $(this).addClass('hide');

  var currentPage = $('#pages .page[data-page="' + page + '"]');

  currentPage.fadeIn('slow', function() {
    $(this).removeClass('hide');
    $('html,body').animate({ scrollTop: currentPage.offset().top });
  });
});

Veja o exemplo funcionando:

$(document).ready(function() {
  //Função que mostra o conteúdo de acordo com o botão clicado (menu)
  $("#menu li a[href^='#']").on('click', function(e) {
    e.preventDefault();

    var target_id = $(this).attr('href');
    var page = $(this).data('page');
    
    $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
      $(this).addClass('hide');
      
      var currentPage = $('#pages .page[data-page="' + page + '"]');
      
      currentPage.fadeIn('slow', function() {
        $(this).removeClass('hide');
        $('html,body').animate({ scrollTop: currentPage.offset().top });
      });
    });
  });

  //Função que insere a classe Active no botão que foi clicado (menu)
  $("#menu li").on('click', function() {
    $(this).siblings().removeClass('actives');
    $(this).addClass('actives');
  });
});
#pages .page {
   min-height: 900px;
}

#pages #sobre {
   background: #fc0;
}

#pages #teste {
   background: #cfcfcf;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="store container">
  <ul id="menu">
    <li>
      <a data-page="sobre" href="#sobre">
        <h2> Sobre </h2>
      </a>
    </li>
    <li>
      <a data-page="teste" href="#teste">
        <h2> Teste </h2>
      </a>
    </li>
  </ul>
</div>


<div id="pages">
  <section id="sobre" class="page style" data-page="sobre">
    <header>
      <h2> aaaa </h2>
    </header>
    <p class="text">aaaaaaaaaaaaaaaa.</p>
  </section>

  <section id="teste" class="page style" data-page="teste">
    <header>
      <h2> bbbb </h2>
    </header>
    <p class="text">bbbbbbbbbbbbbbbb.</p>
  </section>
</div>

2
  • 1
    de fato está correto e não me atentei a isso daí pedi para ele inserir mais códigos testáveis, obrigado @Guilherme.
    – ElvisP
    Commented 22/04/2019 às 11:00
  • obrigado, grande ajuda
    – edu
    Commented 23/04/2019 às 19:41

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 .