0

Tenho um problema que quando abro um link que direciona para uma ancora de outra página e fica escondido pelo header fixer.

Tenho um menu na minha página:

Dentro da Index.html tenho esse menu

<a href="produtos.html#produto1">Produto 1</a>
<a href="produtos.html#produto2">Produto 2</a>
<a href="produtos.html#produto3">Produto 3</a>

Contudo, ao clicar e abrir, as ancoras ficam escondidas, pois tenho um header com position:fixed.

http://jsfiddle.net/thallysondias/q4hp3euv/ Jsfiddle -mostrando como a div fica escondida

Como faço para poder, ao clicar para abrir, automaticamente fazer um scroll de 100px para baixo?

Minha página é essa: http://www.omnibees.com/novo3/clientes.html#case-studies Se utilizar o os menus superiores para querer abrir uma nova pagina em determinada seção, vera q o titutlo da seção fica escondido.

2 Respostas 2

0

Se o link âncora não está resolvendo, você pode tentar usar uma função para verificar qual parâmetro chega pela url e fazer um scroll até o local desejado.

if (param === "#produto1") {
  window.scrollTo(element)
}
1
  • a ancora funciona, meu problema é que eu preciso dar um scroll para baixo, para o conteudo nao ficar escondido pelo menu Commented 10/02/2015 às 15:23
0

Encontrei a solução:

/**
 * Check a href for an anchor. If exists, and in document, scroll to it.
 * If href argument ommited, assumes context (this) is HTML Element,
 * which will be the case when invoked by jQuery after an event
 */
function scroll_if_anchor(href) {
    href = typeof(href) == "string" ? href : $(this).attr("href");

    // You could easily calculate this dynamically if you prefer
    var fromTop = 180;

    // If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
    // Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
    if(href.indexOf("#") == 0) {
        var $target = $(href);

        // Older browser without pushState might flicker here, as they momentarily
        // jump to the wrong position (IE < 10)
        if($target.length) {
            $('html, body').animate({ scrollTop: $target.offset().top - fromTop } ,1000, 'easeOutSine');
            if(history && "pushState" in history) {
                history.pushState({}, document.title, window.location.pathname + href);
                return false;
            }
        }
    }
}    

// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);

// Intercept all anchor clicks
$("body").on("click", "a", scroll_if_anchor);

Foi a unica forma q encontrei de garantir que sempre o scroll ocorre.

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 .