Solution for screen transition

Question

Solution for screen transition

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

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>

For transitioning screens, I usually use scrollTop , however I have to report the position of each section in px . And that's not what I want. Is there any way I can scroll directly to the desired id , 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');
});

jquery

asked by anonymous 11.10.2014 / 05:33

2 answers

2

( link )

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

11.10.2014 / 13:55

Get the value of a TD tag by jquery and send to method in Controller Conversion is not valid

score 2 · Accepted Answer

use $(this).offset().top . offset() will get the coordinates of the element, while $(this).offset().top will get the distance of the element clicked in the vertical position. In the animate you use the offset of the element 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 by using the ID and CLASS combination. When you click on <section id=" ..."> it will animate to the corresponding div without having to set item by item. For that 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>