Problems in the one page layout menu

Asked

Viewed 22 times

0

Hello, I am developing a one page layout, however I am having problems in the menu, in the navigation I have links to Divs at home, but a single link in the menu goes to another page on the site, and when you are on this page and click on another navigation link, the script does not find the div on that page. What I need is for the script to go back to the home and look for the div there.

HTML:

<nav class="desktop">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/cardapio">Cardápio</a></li>
        <li><a class="interno" href="#destaques">Destaques</a></li>
        <li><a class="interno" href="#galeria">Galeria</a></li>
        <li><a class="interno" href="#sobre">Sobre</a></li>
        <li><a class="interno" href="#contato">Contato</a></li>
    </ul>
</nav>

Javascript:

$('.main-header .top-header nav.desktop ul li a.interno').click(function(e){
   e.preventDefault();
   var id = $(this).attr('href');
   targetOffset = $(id).offset().top,
      menuHeight = $('.main-header .top-header').innerHeight();
   $('html, body').animate({
      scrollTop: targetOffset - menuHeight
   }, 1000);
});
javascript html

  • And because on this separate page you do not put the full links in the same way you did to enter this page extrar type /index or /#highlights?

  • I tried to put /#highlights on href but it doesn’t work

  • Try href="/index.html#highlights" if it works, tell me which put as answer :)

  • Doesn’t work. :(

  • Only works without script, script does not work

  • This happens because of this line in your script e.preventDefault(); on the separate page remove this line from the JS if possible, or if on this page you don’t use any of this JS it doesn’t even make sense to be on the page, then you don’t need to index it on this page and use the links as I said earlier...

  • Yes, it worked without the line, but it keeps showing the div in the browser url, this list already hides it.

  • Another thing is that the screen flashes before rolling to the div, as if it were to the top of the page and quickly scrolls to the div

  • Face the hint was to withdraw the e.preventDefault(); only on the page that will not have internal anchors, and not in the Script of the main page... If that’s your case, because if you have a.js script indexed on the page, just don’t index it on the page that will have anchors. So on this page you can use the links as I said href="/index.html#destaques"

Show 4 more comments
No answers

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.