Solution for screen transition

Question

I have a one-page site that will follow the following pattern:

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

To make the transition of screens, I usually use the scrollTop, but I have to inform the position of each Section in px. And that’s not what I want. Is there any way I can scroll straight to id desired, or something like that?

What I currently use:

$('.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');
});

Answer 1

use $(this).offset().top. offset() will get the element coordinates, while $(this).offset().top will pick up the distance of the element clicked in the vertical position. In the Animate you use the element offset to move the screen. I made a jsfiddle to illustrate.

$('.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');
});

---

You can do it more simply using the combination ID and CLASS. When you click on <section id=" ..."> it will animate up to the corresponding div without needing to define item by item. For this way I made another 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>

Answer 2

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

can use this jquery script that scrolls to the anchor on the same page

$('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;
                                        }
                                  }
                            }); 

with this type of anchors

<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>

and use your sections in the same way:

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