Question

我有两页，几乎相同的菜单固定在顶部（除了链接）
该菜单是第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页，一个不那么重要的内容页面时，菜单仍然需要适用于我的主页面。因此，当我单击一个菜单项时，它应该返回到主页面并滚动到该部分。

要求：

网址中没有污点（/＃部分）。
标题占用66px所以它应该在该部分实际开始之前滚动到66px。
这应该只适用于第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

链接到其他页面并滚动到部分

2 个答案: