Ссылка на другую страницу и перейдите к разделу

Question

У меня есть 2 страницы с почти то же фиксированное меню на верхней (кроме ссылок)
меню находятся ссылки на разделы страницы на странице 1 (главная страница)

страница меню 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> 

страница меню 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> 

на главной странице, при нажатии на пункт меню, страница прокручивается красиво этой секции без р например, в разделе «#» в URL-адресе. Для этого я использую:

$("#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; 

}); 

Теперь, когда я нахожусь на странице 2, менее важное содержание страницы, меню все еще нужно работать на моей главной странице. Итак, когда я нажимаю элемент меню, он должен вернуться на главную страницу и перейти к этой секции.

Требования:

• Нет Polution в URL (/ # раздел).
• Заголовок занимает 66 пикселей, поэтому он должен прокручиваться до 66 пикселей, прежде чем начнется раздел.
• Это должно быть только для меню на странице 2 (с добавлением другого класса в HTML на странице 2, может быть?)

Любые мысли или лучшие практики для этой ситуации?

Answer 1

Как насчет использования localStorage? Когда вы находитесь на странице 2 и щелкните ссылку, скажем, «службы», вы сохраните соответствующее значение в localStorage. Затем при загрузке страницы вы проверяете любые значения в localStorage, интерпретируете их, прокручиваете окно, если необходимо, и очищаете значение localStorage.

Answer 2

Использование куки помощь 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; 
} 

И восстановить с помощью спускового мыши:

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