1

Tenho um site one-page que vai seguir o seguinte padrão:

<section id="home"></section>
<section id="empresa"></section>
<section id="mapa"></section>
<section id="contato"></section>

Para fazer a transição de telas, geralmente eu uso o scrollTop, porém eu tenho que informar a posição de cada section em px. E não é isso que eu quero. Tem alguma forma de eu fazer scrollar direto para a id desejada, ou algo do gênero?

O que uso atualmente:

$('.home').click(function () {
    $('html, body').stop().animate({
        scrollTop: '0'
    }, 700);
    setHistory('MEUSITE- Home', site + '/home');
});
$('.empresa').click(function () {
    $('html, body').stop().animate({
        scrollTop: '855px'
    }, 700);
    setHistory('MEUSITE- Empresa', site + '/empresa');
});

2 Respostas 2

2

use $(this).offset().top. offset() vai obter a coordenadas do elemento, enquanto $(this).offset().top vai pegar a distância do elemento clicado na posição vertical. No animate você usa o offset do elemento para mover a tela. Fiz um jsfiddle para ilustrar.

$('.home').click(function () {
    $('html, body').stop().animate({ scrollTop: $(this).offset().top }, 700);
    setHistory('MEUSITE- Home', site + '/home');
});
$('.empresa').click(function () {
    $('html, body').stop().animate({ scrollTop: $(this).offset().top }, 700);
    setHistory('MEUSITE- Empresa', site + '/empresa');
});

Você pode fazer de forma mais simples usando a combinação ID e CLASS. Quando clicar no <section id=" ..."> ele vai animar até a div correspondente sem precisar definir item por item. Para essa forma fiz outro jsfiddle

$('section').click(function () {
    section = $(this).attr( 'id' );
    $('html, body').stop().animate({ scrollTop: $('.' + section).offset().top }, 700);
    setHistory('MEUSITE- Empresa', site + '/empresa');
});

// botões
<section id="home">home</section>
<section id="empresa">empresa</section>

// conteúdo
<div class="home">home</div>
<div class="empresa">empresa</div>
2

(http://jsfiddle.net/NadirZenith/ocopr9kb/1/)

pode usar este script jquery que faz um scroll até a ancora na mesma pagina

$('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 - 70//offset from top fixed menu??
                                              }, 1000);
                                              return false;
                                        }
                                  }
                            }); 

com este tipo de ancoras

<ul>
        <li><a href="#home">home</a></li>
        <li><a href="#empresa">empresa</a></li>
        <li><a href="#mapa">mapa</a></li>
        <li><a href="#contato">contato</a></li>
</ul>

e usar suas secçoes da mesma forma:

<section id="home"></section>
<section id="empresa"></section>
<section id="mapa"></section>
<section id="contato"></section>

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 .