当使用BootStrap导航栏中的片段标识符在index.html页面中请求目标时，这个问题涉及如何导航到index.html文件中的目标。导航栏包含在index.html中。导航栏也包含在导航栏中"我们的服务"下拉菜单加载的每个单独的*.html页面中。
我重复一遍，每个*.html页面都需要支持导航回位于index.html页面中的标识符的目标，这样做应该像在index.html页面加载导航条时使用导航条一样，保持目标在页面中的位置。重新定位失败。
请通过加载网站[1]并选择"关于我们"、"联系我们"、"查找我们"和我们一起工作"来开始观察。我们看到了从index.html请求的所需目标定位。CGC徽标将重新加载页面。现在我请您忽略这些警报。我们想观察的是，当使用导航条片段标识符在===index.html页面内导航时，每个部分在页面内的位置都会被加载，即目标位于页面顶部。
// Typical navbar data-target fragment identifier snippet
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#section-for-about-us"
data-target="#section-for-about-us"
onclick="pageTarget('section-for-about-us')"
title="About Us">About Us</a><!--data-target="#section-for-about-us"-->
</li>
...
</ul>出现的真正问题是，当目标位于请求目标的另一个页面中时，如何在index.html中请求目标并重用其数据目标。我已经编写了如下所示的pageTarget（target）函数，该函数将导航回index.html页面。一个匿名函数试图（但失败了）重新定位index.html主页中的目标部分。
在没有pageTarget（target）功能的情况下，导航完全失败，当导航栏加载到*.html文件中试图导航回index.html文件时，从导航栏中选择About Us时，导航什么都不做。pageTarget（target）功能确实支持导航回index.html，但是目标（Aout Us）的重新发布失败。
为了澄清，当从index.html文件中请求About Us时，该函数将导航回index.html，但不会像从导航栏中选择About Uss时定位自己一样定位"关于我们"（关于我们的#部分）目标。通常情况下，这是预期的数据目标行为，但多次尝试写入各种形式的页面目标（目标）和匿名函数仍然失败，无法产生所需的目标重新定位（关于我们）
我请求帮助重新定位目标区域
为了简洁起见，请使用导航栏下拉菜单中的"我们的服务>施工测试"，并选择"关于我们"作为解决方案（如果有）进行所有进一步的讨论，因为发现的任何解决方案都可以在之后复制。
解释警报。。。
//index.html警报splitPart：包含splitPart[0]，它返回一个部分文件名（无扩展名）referrer：包含HTTP referrersection：包含片段标识符，例如#section for about us
我建议以下几点来了解警报和我试图解决的情况；
//加载主页（选择要重新加载的CGC徽标）http://metromilwaukee.com/cgc-test/
//选择我们的服务>施工测试//警报。。。splitPart:cgc构建测试服务参考者：cgc建筑测试服务部分：（将仍然是空的，因为它应该在这个步骤）
//选择关于我们//警报。。。splitParts:索引参考者：index.htmlsection:#关于我们的部分（由匿名函数填充）
观察我们的部分，位置在"想去的地方"下方约35px如何正确定位是目标
//********************************************
// EXTERNAL JS CODE FOLLOWS...
//********************************************
// EXTERNAL JS PAGETARGET FUNCTION CALLED FROM NAVBAR
function pageTarget(target) {
'use-strict';
// target should contain an argument passed by navbar calling this function
// target argument should be a partial fragment identifier (without hash mark)
if(target.length > 0){
var target = target;
}
var referrer = document.referrer;
referrer = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
// split off the filename extension and put the filename partial into splitPart
var splitPart = referrer.split(".");
// splitPart[0] should contain one of the following filename partials
// when its menu item is selected from the "Our Services" navbar dropdown
if (splitPart[0] === 'cgc-construction-testing-services' ||
splitPart[0] === 'cgc-geotechnical-engineering-services' ||
splitPart[0] === 'cgc-geotechnical-laboratory-services' ||
splitPart[0] === 'cgc-department-of-transportation-services' ||
splitPart[0] === 'cgc-projects-portfolio' ||
splitPart[0] === 'index'){
if (splitPart[0] !== 'index') {
switch (target) {
// "sections" are literally HTML <sections> located in index.html
// which are decorated with an id attribute targeted by a data-target
// fragement identifier referenced by anchor elements within the navbar
case "section-for-about-us":
if (target.length > 0){
// Navigate to #section-for-about-us target
// located within index.html (typ)
$(location).attr('href', 'index.html#' + target);
}
break;
case "section-for-contact-us":
if (target.length > 0) {
$(location).attr('href', 'index.html#' + target);
}
break;
case "section-for-find-us":
if (target.length > 0) {
$(location).attr('href', 'index.html#' + target);
}
break;
case "section-for-work-with-us":
if (target.length > 0) {
$(location).attr('href', 'index.html#' + target);
}
break;
}//switch
}//if (splitPart[0] !== 'index')
}//if (splitPart[0] ===
}//function pageTarget(target)// EXTERNAL JS ANONYMOUS FUNCTION LOADED BY EACH PAGE LOAD...
// Anonymous function used in conjunction with pageTarget(target) function.
// This anonymous function should reposition targeted sections within the
// index.html homepage when navbar menu selections are requested from the
// navbar when it happens to be contained within a separate *.html file
// attemnpting to navigate back to the index.html homepage.
//
// This approach is necessary because pageTarget(target) loads the index.html
// homepage but the targeted section is postioned ~35px below where it "should be"
// when navbar menu selections are requested from within index.html.
$(function () {
'use-strict;'
var section = $(location).attr('hash');
var referrer = $(document).prop("referrer");
referrer = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
var splitPart = referrer.split(".");
// ALERT
// What are the object properties at this point in navigation
alert('splitPart: ' + splitPart[0] + 'n' +
'referrer: ' + referrer + 'n' +
'section: ' + section);
if (referrer.length !== 0) {
// same properties documented within pageTarget(target) function
if (splitPart[0] === 'cgc-construction-testing-services' ||
splitPart[0] === 'cgc-geotechnical-engineering-services' ||
splitPart[0] === 'cgc-geotechnical-laboratory-services' ||
splitPart[0] === 'cgc-department-of-transportation-services' ||
splitPart[0] === 'cgc-projects-portfolio' ||
splitPart[0] === 'index') {
if (splitPart[0] !== 'index') {
switch (splitPart[0]) {
case "cgc-construction-testing-services":
// same sections as documented by pageTarget(target) function
if(section.length !== 0){
switch (section) {
case "#section-for-about-us":
// reposition targeted section (typ)
$(body).css('paddingTop', '-35px');
break;
}
}
break;
case "cgc-geotechnical-engineering-services":
$(body).css('paddingTop', '-35px');
// etc.
break;
}//switch
}//if (splitPart[0] !== 'index')
}//if (splitPart[0] ===
}//if (referrer.length != 0)
});//$(function ()[1]http://metromilwaukee.com/cgc-test/导航栏是使用jQuery$（"#cgc-top-navbar"）加载的。load（"cgc-top-navbar大屏幕.shtml"）；并且由于在index.html主页的顶部存在被禁用的SVG动画页面资产，该资产继续占用DOM内的空间。显示SVG对象时，重新定位问题仍然存在。
[2] 查看index.html文件的源代码并获取ViewPort Dimensions脚本，这对于RWD 来说非常方便
我做了很多stackoverflow和谷歌搜索，以及编写和重写函数，但我还没有弄清楚如何重新定位。我希望有人能够并且将帮助解决这个问题。。。
// Typical navbar data-target fragment identifier snippet
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#section-for-about-us"
data-target="#section-for-about-us"
onclick="pageTarget('section-for-about-us')"
title="About Us">About Us</a><!--data-target="#section-for-about-us"-->
</li>
...
</ul>