JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<ul class='menuItensPrincipal'>
    <li class='menuFixoListHome'>
        <div id='home' class='menuFixoListNome'><a href="home">Home</a>
        </div>
        <div class='menuFixoListFechar'></div>
    </li>
    <li class='clear'></li>
    <li class='sobrehotel menuFixoList'><a href="/sobre-o-hotel">Sobre o Hotel</a></li>
    <li class='tarifario menuFixoList'><a href="/tarifarios">Tarif&aacute;rio</a></li>
    <li class='noticias menuFixoList'><a href="/noticias">Not&iacute;cias</a></li>
    <li class='reservas menuFixoList'><a href="/reservas">Reservas</a></li>
    <li class='contato menuFixoList'><a href="/contato">Contato</a></li>
    <li class='jsfiddle menuFixoList'><a href="/_display/">JSFiddle</a></li>
</ul>
<div style="height:500px"></div>
<div class="sobrehotel conteudo">
     <h1>Sobre o Hotel</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id laoreet erat. Sed maximus lorem et velit faucibus, ac mollis lorem egestas. Duis vel urna dapibus, eleifend urna vel, rhoncus urna. Phasellus placerat libero nulla, in sollicitudin elit elementum ut. Aliquam a felis a dolor consectetur bibendum eget id augue. Maecenas vehicula tortor in sodales commodo. In quam augue, ultricies id porta quis, scelerisque in nunc. Aliquam in est eget ipsum volutpat elementum. Donec vel pulvinar lorem, in auctor dolor.</p>
    <p>Duis commodo mollis accumsan. Nunc erat metus, elementum in augue at, dignissim sollicitudin tellus. Praesent dapibus magna nisi, non congue orci cursus vel. Quisque ipsum libero, auctor in ex et, dictum malesuada enim. Praesent hendrerit luctus tellus id condimentum. Curabitur a nisi in leo placerat tincidunt et et felis. Suspendisse et hendrerit magna. Fusce mollis at magna at feugiat. Maecenas ut ex sem. Maecenas consequat venenatis semper. Aliquam tempor vel risus in pharetra. Suspendisse sit amet nulla eget metus accumsan finibus et non justo. Etiam in lorem leo. Integer non sapien tortor.</p>
</div>
<div...

CSS

div.conteudo {
    padding: 10px;
    min-height: 700px;
}

JavaScript

$(document).ready(function(){ 

    // pegar dinamicamente o path da tela result do jsfiddle (pois ele é dinamico) apenas para funcionar o exemplo de click automatico...
    $('.jsfiddle.menuFixoList A').attr('href', window.location.pathname);
    $('.jsfiddle.conteudo SPAN').html(window.location.pathname);

    
    
    
    $('.menuFixoList A').click(function (e) {
        e.preventDefault();
        var classe = $(this).parent().attr('class').split(' ')[0]; // pegar a primeira classe do LI pai do link clicado
        setHistory($(this).text(), $(this).attr('href'));
        $('html, body').stop().animate({
            scrollTop: $('div.'+classe+'.conteudo').offset().top // pegar o offset.top do div com a mesma classe do LI pai do link clicado
        }, 700);
    });

    $('.menuFixoList A[href="' + window.location.pathname + '"]').click(); // simular o click em um link com o mesmo endereço aberto na URL atual. Essa linha deve vir sempre depois da declaração da função click dos links.

});

// compatibilidade...
    function setHistory() {return false;}