Fixed menu does not go to the id of a certain li when it clicks

Navigation
0

I have this fixed menu, where I want when you click on a link, scroll on the page and go to the link that was clicked.

It's not working right, as you can see from the link I'm making.

link

Jquery that scrolls when you click 

$(window).scroll(function (event) {

    var scroll = $(window).scrollTop();
    var item = $('#servicos ul').offset().top;
    if( (scroll+400) > item ){
      animSvg( $('.svg') );    
    }

    $('#servicos ul li.bloco').each(function( index ) {
      if( index < (count+1) ){
        var item = $(this).offset().top;
        var anim = $(this).find('.svg-lista');
        if( (scroll+200) > item ){
          var ativo = $('.label_serv a').children('li').eq(index);
          $('.label_serv a li').removeClass('active');
          ativo.addClass('active');


          animSvg( anim );    
        }
      }

    });

  });

});

html 

<section id="servicos">
   <div class="container">
      <ul class="col-xs-12 no-padding">
         <li id="teste" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
         </li>
         <div class="col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <svg class="primeiro" width="100%" height="100%">
               <rect class="svg" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="440" >
                  <!-- <animate attributeName="stroke-dasharray" attributeType="XML"
                  from="630"  to="440"
                  begin="1s" dur="1s"
                  fill="freeze" /> -->
               </rect>
            </svg>
         </div>
         <li id="ANALISE_DE_IMERSÃO" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <svg class="inverso" width="100%" height="100%">
               <rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1940">
                  <!-- <animate attributeName="stroke-dasharray" attributeType="XML"
                  from="1160"  to="1940"
                  begin="2s" dur="3s"
                  fill="freeze" /> -->
               </rect>
            </svg>
            <div class="box">
               <img src="http://187.23.65.93/3dmind/svg/svg_1.svg"alt="Imersão">
            </div>
            <h3 style="text-transform:uppercase;">ANÁLISE DE IMERSÃO <span></span></h3>
            <span class="col-sm-10 col-sm-offset-1"><p class="p1">Utilizamos métodos e ferramentas que nos permitem analisar as estratégias de <strong>players</strong> que se <strong>destacam</strong> no seu segmento, afinal, conhecer bem o posicionamento dos <strong>concorrentes</strong> é fundamental para o planejamento.</p></span>
         </li>
         <li id="FATOR_X_DIFERENCIAL" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <svg class="esq" width="100%" height="100%">
               <rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1740">
                  <!-- <animate attributeName="stroke-dasharray" attributeType="XML"
                  from="960"  to="1740"
                  begin="2s" dur="3s"
                  fill="freeze" /> -->
               </rect>
            </svg>
            <div class="box">
               <img src="http://187.23.65.93/3dmind/svg/svg_2.svg"alt="FATOR_X_DIFERENCIAL">
            </div>
            <h3 style="text-transform:uppercase;">FATOR X – DIFERENCIAL <span></span></h3>
            <span class="col-sm-10 col-sm-offset-1"><p>Depois de entender o segmento, é hora
            de encontrar o seu diferencial. Como nos destacaremos no mercado, <strong>Preço</strong>? <strong>Tecnologia</strong>? <strong>Atendimento</strong>? Nossos Consultores apresentarão inúmeras ideias para análise.</p></span>
         </li>
         <li id="VALIDAÇÃO" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <svg class="inverso" width="100%" height="100%">
               <rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1940">
                  <!-- <animate attributeName="stroke-dasharray" attributeType="XML"
                  from="1160"  to="1940"
                  begin="2s" dur="3s"
                  fill="freeze" /> -->
               </rect>
            </svg>
            <div class="box">
               <img src="http://187.23.65.93/3dmind/svg/svg_3.svg"alt="VALIDAÇÃO">
            </div>
            <h3 style="text-transform:uppercase;">VALIDAÇÃO <span><p>Conceito STARTUP</p></span></h3>
            <span class="col-sm-10 col-sm-offset-1"><p class="p1"><span class="s1">Depois de debater e escolher as melhores ideias, é hora de colocar em prática para validar junto ao mercado <strong>quais ações</strong> geram mais <strong>resultado</strong>, agindo de formarápida para agilizar a resposta do consumidor.</span></p></span>
         </li>
         <li id="ADEQUAÇÃO" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <svg class="esq" width="100%" height="100%">
               <rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1740">
                  <!-- <animate attributeName="stroke-dasharray" attributeType="XML"
                  from="960"  to="1740"
                  begin="2s" dur="3s"
                  fill="freeze" /> -->
               </rect>
            </svg>
            <div class="box">
               <img src="http://187.23.65.93/3dmind/svg/svg_4.svg"alt="ADEQUAÇÃO">
            </div>
            <h3 style="text-transform:uppercase;">ADEQUAÇÃO <span></span></h3>
            <span class="col-sm-10 col-sm-offset-1"><p class="p1"><span class="s1">Com as análises obtidas, é hora de fazer os ajustes necessários para apresentar oficialmente ao mercado, <strong>integrando</strong> todos os setores da empresa para <strong>otimizar</strong> os processos e <strong>resultados</strong>. </span></p></span>
         </li>
         <li id="EXECUÇÃO" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <svg class="inverso" width="100%" height="100%">
               <rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1940">
                  <!-- <animate attributeName="stroke-dasharray" attributeType="XML"
                  from="1160"  to="1940"
                  begin="2s" dur="3s"
                  fill="freeze" /> -->
               </rect>
            </svg>
            <div class="box">
               <img src="http://187.23.65.93/3dmind/svg/svg_5.svg"alt="EXECUÇÃO">
            </div>
            <h3 style="text-transform:uppercase;">EXECUÇÃO <span></span></h3>
            <span class="col-sm-10 col-sm-offset-1"><p class="p1"><span class="s1">Na etapa de execução, além do <strong>treinamento</strong> da equipe, criamos o <strong>Plano de Ação</strong> utilizando as melhores estratégias de <strong>Inbound</strong> e <strong>Outbound</strong> Marketing.
            </span></p></span>
         </li>
         <li id="MONITORAMENTO" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <svg class="esq" width="100%" height="100%">
               <rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1740">
                  <!-- <animate attributeName="stroke-dasharray" attributeType="XML"
                  from="960"  to="1740"
                  begin="2s" dur="3s"
                  fill="freeze" /> -->
               </rect>
            </svg>
            <div class="box">
               <img src="http://187.23.65.93/3dmind/svg/svg_4.svg"alt="MONITORAMENTO">
            </div>
            <h3 style="text-transform:uppercase;">MONITORAMENTO <span></span></h3>
            <span class="col-sm-10 col-sm-offset-1"><p class="p1"><span class="s1">Monitorar os resultados e fazer ajustes durante a execução é fundamental para manter-se no <strong>caminho certo</strong>. A 3Mind acompanha sua equipe até o momento de amadurecimento ideal do projeto.</span></p></span>
         </li>
         <li id="resultados" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
            <button class="btn-default botao_lista">Ver exemplos de Análise e os Resultados</button>
         </li>
      </ul>
   </div>
   <ul class="label_serv">
      <a href="javascript:void(0)" onclick="scrollCustom('ANALISE_DE_IMERSÃO')">
      <li class="0 active"><i></i>Ánalise de Imersão</li></a>
      <!-- <a href="#imersao"><li class="0"><i></i>Imersão</li></a> -->
      <a href="javascript:void(0)" onclick="scrollCustom('FATOR_X_DIFERENCIAL')">
      <li class="1"><i></i>Fator x Difenrencial</li></a>
      <!-- <a href="#posicionamento"><li class="1"><i></i>Posicionamento</li></a> -->
      <a href="javascript:void(0)" onclick="scrollCustom('VALIDAÇÃO')">
         <li class="2">
      <i></i>Validação</li></a>
      <!-- <a href="#ux-e-ui"><li class="2"><i></i>UX e UI</li></a> -->
      <a href="javascript:void(0)" onclick="scrollCustom('ADEQUAÇÃO')">
         <li class="3">
      <i></i>Adequação</li></a>
      <!-- <a href="#conversao"><li class="3"><i></i>Conversão</li></a> -->
      <a href="javascript:void(0)" onclick="scrollCustom('EXECUÇÃO')">
         <li class="4">
      <i></i>Execução</li></a>
      <!-- <a href="#segmentacao-avancada"><li class="4"><i></i>Segmentação Avançada</li></a> -->
      <a href="javascript:void(0)" onclick="scrollCustom('MONITORAMENTO')">
      <li class="5"><i></i>Monitoramento</li></a>
      <!-- <a href="#nutricao-de-leads"><li class="5"><i></i>Nutrição de Leads</li></a> -->
      <a href="javascript:void(0)" onclick="scrollCustom('resultados')">
      <li class="6"><i></i>Resultados</li></a>
      <!-- <a href="#pos-venda-e-cross-sell"><li class="6"><i></i>Pós-Venda e Cross-Sell</li></a> -->
   </ul>
</section>
    
asked by anonymous 30.11.2017 / 20:25

1 answer

1

Use scrollTop: $('#' + id).offset().top to scroll to id of element. It would look like this: 

$('html, body').animate({scrollTop: $('#' + id).offset().top}, 'slow');

Example: 

function rolar(id){
    $('html, body').animate({scrollTop: $('#' + id).offset().top}, 'slow');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="javascript: rolar('teste')">Clique aqui para ir à div com id #teste</a>
<p id="inicio">
Nada diz mais sobre um cliente do que seu comportamento de compra. Com esses dados e os sistemas de automação que implementamos, conseguimos fazer com que o cliente volte sempre para a loja porque enviamos produtos dentro daquilo que ele já mostrou interesse ou que precisa de reposição. É marketing automation no mais alto nível.
</p>
<div id="teste" style="margin-top: 400px; padding-bottom: 1000px;">
  <p>Olá! Eu sou a div teste!</p>
  <a href="javascript: rolar('inicio')">Clique aqui para ir à div com id #inicio</a>
</div>
    
30.11.2017 / 21:35
Object comes pro bean with all fields blank JSF can only concatenate list (not "str") to list