Scroll according to Section ID

Question

I got the following li

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

and the following Jquery

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

I mean, when I click on li it goes straight to the Ction that I informed and already informs the href in the address bar.

For example: http://madmax.com.br/#Mad-max

And if I want when the user type http://madmax.com.br/#Beyond-the-Thunderdome in the address bar, it goes directly to that Action, without having to click on the menu, how? Do the same process as if he had clicked on li in question. Website http://madmax.com.br

Answer 1

You just need to put the Section ID, exactly as you put it on the link, for example:

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


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

These are the so-called anchor links... And look, with jquery you can make this scroll smooth.

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

Answer 2

It already does this automatically if you use id's instead of classes for each section.
These are called anchor links! Here’s an example below:

More information on how anchor links work:
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>

Now if you access the navigation link by adding as an extension to the URL any of id'The section you intend to go to, it will automatically jump into that section. (Or by clicking one of the navigation links that are already pointing to the existing sections).

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

In the comment I added earlier I included the (bar) / in the navigation address, but it is not necessary and also the correct way to do it is as I just mentioned above.

In the jsFiddle this will not work because it prevents the possibility of accessing the link using the id in the URL, but I tested it locally and it works perfectly!
Good luck and good continuation of programming! :)