Scroll according to section ID

1

I have 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');
});

That is, when I click on li it goes straight to the section I reported and already informs the href in the address bar.

For example: link

And if I want the user to type link in the address bar, it will go directly to that address section, without having to click on the menu, how? Do the same process as if he had clicked on the li in question. Site link

    
asked by anonymous 29.06.2016 / 05:32

2 answers

1

It already does this automatically if you use id 's instead of classes for each section. These are called anchor links! Here is 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 the id 's of the section you want to go to, it will automatically jump to 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 added the (%) bar to the navigation address, but it's not necessary and the correct way to do it is just like I mentioned above.

     

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

    
30.06.2016 / 03:37
1

You just need to put the section ID, just like you put it in 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 leave this scroll smooth.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><scripttype="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>
    
29.06.2016 / 18:38