鏈接到其他頁面並滾動到部分

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中放入/＃section之類的內容。 為此，我使用：

$("#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頁時，菜單仍需要用於我的主頁。 因此，當我單擊菜單項時，應返回主頁並滾動到該部分。

要求：

• 網址（/＃section）中沒有污染。
• 標頭占66像素，因此在該部分實際開始之前應滾動到66像素。
• 這僅應用於第2頁上的菜單（也許在第2頁上的html中添加了不同的類？）

對於這種情況有什么想法或最佳做法？

Answer 1

如何使用localStorage？ 當您在第2頁上並單擊指向“服務”的鏈接時，您將相應的值保存在localStorage中。 然后在頁面加載時，您檢查localStorage中是否有任何值，對其進行解釋，如有必要，滾動窗口並清除localStorage值。

Answer 2

使用Cookie幫助功能：

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