1

Tenho o seguinte li

<li class="madmaxmenu">
<a href="#mad-max">Mad Max</a>
</li>

e o seguinte Jquery

$("li.madmaxmenu").click(function() {
    $('html,body').animate({
        scrollTop: $("#madmax").offset().top - 120},
    'slow');
});

Ou seja, quando eu clico na li ele vai direto para a section que informei e já informa o href na barra de endereço.

Por exemplo: http://madmax.com.br/#mad-max

E se eu quiser que quando o usuário digite http://madmax.com.br/#beyond-the-thunderdome na barra de endereço, ele vá diretamente para esse section, sem ter que clicar no menu, tem como? Fazer o mesmo processo de como se ele tivesse clicado na li em questão. Site http://madmax.com.br

2
  • 1
    Ele já faz isso se utilizares um id em vez de uma class. Por exemplo se tiveres um link ou uma li assim: <li id="beyond-the-thunderdome"> em vez de uma class, quando o usuário acessar o site usando o link do exemplo que deste http://madmax.com.br/#beyond-the-thunderdome, quando carregada a página, ele vai automaticamente "saltar" para essa secção com esse id. Estes são chamados de "links ancora".
    – Chun
    29/06/2016 às 3:56
  • Mas eu teria que informar o id aonde? 29/06/2016 às 14:27

2 Respostas 2

1

Ele já faz isso automaticamente se utilizares id's em vez de classes para cada secção.
Estes são chamados de links ancora! Eis um exemplo abaixo:

Mais informações sobre como funcionam os links ancora:
w3Schools - HTML Links - Create a Bookmark
RapidTables - HTML anchor link

CSS:

.section {
    height: 75vh;
    width: 100%;
    background-color: #d2d2d2;
    margin-bottom: 15px;
}

HTML:

<ul class="float-right">
  <li class="madmaxmenu">
    <a href="#mad-max">Mad Max</a>
  </li>
  <li class="theroadwarriormenu">
    <a href="#the-road-warrior">The Road Warrior</a>
  </li>
  <li class="beyondthethunderdomemenu">
    <a href="#beyond-the-thunderdome">Beyond The Thunderdome</a>
  </li>
  <li class="furyroadmenu">
    <a href="#fury-road">Fury Road</a>
  </li>
</ul>

<div id="wrapper">
  <div class="section" id="mad-max"> Secção Mad Max </div>
  <div class="section" id="the-road-warrior"> Secção Road Warrior </div>
  <div class="section" id="beyond-the-thunderdome"> Secção Beyond The Thunderdome </div>
  <div class="section" id="fury-road"> Secção Mad Max </div>
</div>

Agora se acessares o link de navegação adicionando como extensão ao URL qualquer um dos id's da secção que pretendes ir, ele vai automaticamente saltar para essa secção. (Ou clicando num dos links de navegação que já estão a apontar para as secções existentes).

Exemplo: http://minhaPagina.html#the-road-warrior

No comentário que adicionei anteriormente incluí a (barra) / no endereço de navegação, mas não é necessário e também a forma correta de se fazer é como eu acabei de mencionar acima.

No jsFiddle isto não vai funcionar, pois ele impede a possibilidade de acessar o link utilizando o id na URL, mas eu testei localmente e funciona perfeitamente!
Boa sorte e boa continuação de programação! :)

0
1

Você só precisa colocar a ID da section, exatamente como você colocou no link, por exemplo:

<li class="madmaxmenu">
<a href="#theroadwarrior">Mad Max</a>
</li>


<section id="theroadwarrior"></section>

Esses são os chamados links âncora... E olha só, , com jquery você pode deixar esse scroll suave.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
    function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
    }
    $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
    var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
    var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
    if ($target) {
    var targetOffset = $target.offset().top;
    $(this).click(function() {
    $('html, body').animate({scrollTop: targetOffset}, 300);
    return false;
    });
    }
    }
    });
    });
    // ]]>
    </script>
2

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 .