链接到其他网页并滚动到节

我有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>

在主页上，当我点击菜单项，页面滚动很好的该部分没有p在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页，一个不太重要的内容页面，菜单仍然需要为我的主页工作。所以，当我点击一个菜单项时，它应该回到主页面并滚动到该部分。

要求：

在URL中有polution（/＃部分）。
标题需要66px，因此它应该在该部分实际启动之前滚动到66px。
这应该只是2页上的菜单（2页上添加不同类的HTML也许？）

对于这种情况任何想法或最佳实践？

来源

2014-09-22 Filip Huysmans

如何使用localStorage？当您在第2页上并点击链接时，比如说“services”，您可以在localStorage中保存相应的值。然后在页面加载时检查localStorage中的任何值，解释它们，如有必要滚动窗口并清除localStorage值。

来源

2014-09-22 21:18:42 TomaszO

使用的cookie帮助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

来源

2014-09-23 00:21:45 JoobyPM

链接到其他网页并滚动到节

回答

相关问题