Ancora Scroll

[lezão 0]

Boa noite!

Td bem com vcs?

 

Eu tenho um menu q estou utilizando um Scroll Suave, funciona perfeitamente, mas estou precisando que qnd eu clico no link ele fique selecionado (active)

veja meu código abaixo:

  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>


                                            <li><a class="active" href="#topo" class="scrollSuave">Pagina Inicial</a></li>
                                            <li><a href="#sobre" class="scrollSuave">Sobre nós</a></li>
                                            <li><a href="#servico" class="scrollSuave">Nossos Serviços</a></li>
                                            <li><a href="#portfolio" class="scrollSuave">Portfolio</a></li>
                                            <li><a href="#coment" class="scrollSuave">Deixe um recado </a></li>
                                            <li><a href="#client" class="scrollSuave">Clientes</a></li>


    <div id="topo">                            
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="sobre">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="servico">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="portfolio">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="coment">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="client">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <script type="text/javascript">
    //<![CDATA[


// Exemplo apontando para a class criada para lidar com este efeito

var $doc = $('html, body');
$('.scrollSuave').click(function() {
    $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top}, 2000);
    return false;
});
//]]> 
  </script>

 

[Omar~ 87]

Não respondendo a sua pergunta... Não seria mais ágil usar só um margin-top no(s) elemento(s) ao invés de tantas tag's break?

Só não ajudo com sua questão porque não mecho com o lixo do jquery se fosse javascript eu te ajudaria.

[wanderval 19]

function listeningToActiveLink() {
  $('a[href*="#"]').click(function(event) {
    var classList = event.target.classList;
    
    if(classList.contains("scrollSuave")) {  
      var allLinks = document.querySelectorAll(".scrollSuave");
      Array.from(allLinks).forEach((el) => el.classList.remove('active'));
      
      classList.add('active');
    }
  })
}

function activeSmoothScroll() {
  var $doc = $('html, body');
  $('.scrollSuave').click(function() {
    $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 2000);
  });
}

$( document ).ready(function() {
  activeSmoothScroll();
  listeningToActiveLink();
});

JsBin: https://jsbin.com/cugebiqato/edit?html,js,output