CODEWITHSUNDEEP
javascripthtml
Filip Huysmans
Filip Huysmans

Reputation: 1341

Link to other page and scroll to section

I have 2 pages with almost the same menu fixed on the top (apart from the links)
The menu are links to page sections on page 1 (main page)

Menu page 1

<nav id="mainNav">
   <ul>
      <li><a href="#about">over ons</a></li>
      <li><a href="#services">diensten</a></li>
      <li class="contact"><a href="#contact">contacteer ons</a></li>
   </ul>
</nav>

Menu page 2

<nav id="mainNav">
    <ul>
       <li><a href="/#about">over ons</a></li>
       <li><a href="/#services">diensten</a></li>
       <li class="contact"><a href="/#contact">contacteer ons</a></li>
    </ul>
</nav>

On the main page, when I click on a menu item, the page scrolls nicely to that section without putting stuff like /#section in the Url. For this I use:

$("#mainNav ul a, .logo a, .cta a").click(function(e){


var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;


$('html,body').animate({scrollTop:target_top -66}, 800);
    return false;

});

Now when I'm on page 2 ,a less important content page, the menu still needs to work for my main page. So when I click a menu item it should go back to the main page and scroll to that section.

Requirements:

Any thoughts or best practices for this situation?

Upvotes: 0

Views: 122

Answers (2)

JoobyPM
JoobyPM

Reputation: 11

Use cookie help funcrion:

// return cookie by name
function getCookie(name) {
     var matches = document.cookie.match(new RegExp(
                     "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
     ));
     return matches ? decodeURIComponent(matches[1]) : undefined;
 }
 // set cookie name -> value
 // options - object with options of cookie (expires, path, domain, secure)
function setCookie(name, value, options) {
     options = options || {};
     var expires = options.expires;
     if (typeof expires == "number" && expires) {
         var d = new Date();
         d.setTime(d.getTime() + expires * 1000);
         expires = options.expires = d;
     }
     if (expires && expires.toUTCString) {
         options.expires = expires.toUTCString();
     }
     value = encodeURIComponent(value);
     var updatedCookie = name + "=" + value;
     for (var propName in options) {
         updatedCookie += "; " + propName;
         var propValue = options[propName];
         if (propValue !== true) {
             updatedCookie += "=" + propValue;
         }
     }
        document.cookie = updatedCookie;
}

And restore by trigger click:

var $main_nav = $('#mainNav'), restore = getCookie('target|main_page');
$main_nav.on('click', 'ul a', function (e) {
   $('.active', $main_nav).removeClass('active');
   $(this).addClass('active');
   try {
       var id = this.href.split("#")[1];
       var $target = $("#" + id);
       $('body').animate({scrollTop: $target.offset().top - 120}, 800);
       if (!restore)setCookie('target|main_page', id);
       e.preventDefault();
   } catch (e) {
       console.error(e);
   }
});

//restore scroll
if (restore) {
   $("a[href='#" + restore + "']", $main_nav).click();
   restore = 0;
}

jsFiddle

Upvotes: 0

TomaszO
TomaszO

Reputation: 38

How about using localStorage? When you're on page 2 and click the link to, let's say, "services" you save a corresponding value in localStorage. Then on page load you check for any values in localStorage, interpret them, scroll a window if necessary and clear the localStorage value.

Upvotes: 1

Related Questions