0

Iniciante em Jquery, porém utilizei este script que encontrei para dar o efeito de suavização no scroll até o link "ancorado":

$(document).ready(function () {
    function filterPath(string) {
        return string
            .replace(/^\//, '')
            .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
            .replace(/\/$/, '');
    }
    $('a[href*=#]').each(function () {
        if (filterPath(location.pathname) == filterPath(this.pathname)
                && location.hostname == this.hostname
                && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function () {
                    if($(window).width() > 760){
                        $('html, body').animate({scrollTop: targetOffset}, 250);
                        return false;
                    }
                });
            }
        }
    });
});

HTML

    <nav id="menu">
       <ul>
        <div class="marcadagua"> <a href="#"> <img src="logo_menu.png"> </a></div>
        <li><a href="#qs">Quem somos</a></li>
        <li><a href="#parceiros">Parceiros</a></li>
       </ul>
      </nav>
--
<div class="divancora"> <a name="qs"></a> </div>
<div class="divancora"> <a name="parceiros"></a> </div>

Ocorre que ele de algum modo ele não leva ao exato ponto destinado. Dá sempre uma diferença de altura até o ponto que deveria ir. Não é uma diferença fixa.

Queria saber a razão disso.

5
  • Da uma diferença para baixo ou para cima? provavelmente ele fica mais abaixo do que você quer, tenta adicionar targetOffset - 100 Commented 26/06/2015 às 14:39
  • Na verdade fica uma diferença pra cima.
    – Anderson
    Commented 26/06/2015 às 14:41
  • Tenta fazer ao invés de -100 use + 100 Commented 26/06/2015 às 14:43
  • Pode ser algum padding ou margin no CSS, tem como fornecer um exemplo no fiddle ou no stacksnippet?
    – Syzoth
    Commented 26/06/2015 às 14:46
  • eu tinha colocado um padding sim pq o menu no topo seguia a rolagem da página de modo a ficar sobrepondo o link, entretanto não era esse o motivo. Aparentemente era algo no js que não funcionava corretamente mesmo. grato.
    – Anderson
    Commented 26/06/2015 às 17:44

1 Resposta 1

1

Esperimente este script.

Seu uso é mais simples e você pode ver seu funcionamento aqui.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
1
  • Obrigado Erlon!
    – Anderson
    Commented 26/06/2015 às 17:42

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 .