Fixed menu does not go to the id of a certain <li> when you click

Question

Fixed menu does not go to the id of a certain <li> when you click

Asked 7 years ago

Viewed 40 times

0

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

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

http://187.23.65.93/3dmind/teste2.html

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>

You really need JS to do this ? Only with HTM can you

– AnthraxisBR

2017/11/30 at 19:41
need to make the animation of scrolling

– Wagner Martins Bodyboard

2017/11/30 at 19:42

1 answer

Browser other questions tagged jquery

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

by Sam • **79,597** points · Answer 1 · 2017-11-30T20:35:18+00:00

Use scrollTop: $('#' + id).offset().top to roll up to the id of the 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>

<a href="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>