我的网站的jscript中有一个错误。重现它的方法是单击静态标题中的链接。多次单击链接后，滚动时会在滚动时放到锚点上，它确实有问题，滚动难以忍受。
我该怎么解决？ 预先谢谢你
这里是我的代码：
$(window).load(function(){
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
$('#static-bar').addClass('view2')
}
else {
$('#static-bar').removeClass('view2');
}
});
});
$(window).load(function() {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function (e) {
var anchors = $('.selector');
for (var i = 0; i < anchors.length; ++i) {
if (isScrolledIntoView(anchors[i])) {
var href = $(anchors[i]).attr('href');
location.hash = href.slice(href.indexOf('#') + 1);
break;
}
}
});
$(window).scroll(function () {
if (window.location.href.indexOf("home") != -1)
{
document.querySelectorAll("#static-bar a[href='#home']")[0].setAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
}
if (window.location.href.indexOf("about") != -1)
{
document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#about']")[0].setAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
}
if (window.location.href.indexOf("services") != -1)
{
document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#services']")[0].setAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
}
if (window.location.href.indexOf("method") != -1)
{
document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#method']")[0].setAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
}
if (window.location.href.indexOf("contact") != -1)
{
document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
document.querySelectorAll("#static-bar a[href='#contact']")[0].setAttribute("class", "dlines");
}
});
$(function () {
var hash = location.hash;
if (hash) {
// Scroll to the element with the given hash.
var anchors = $('.selector');
for (var i = 0; i < anchors.length; ++i) {
if ($(anchors[i]).attr('href') === hash) {
$(window).scrollTop($(anchors[i]).offset().top);
break;
}
}
}
});
});
function home() {
document.querySelectorAll("a.link[href='#home']")[0].setAttribute("id", "home");
document.querySelectorAll("a.link[href='#home']").removeAttr('id');
document.querySelectorAll("a.link[href='#about']").removeAttr('id');
document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function about() {
document.querySelectorAll("a.link[href='#about']")[0].setAttribute("id", "about");
document.querySelectorAll("a.link[href='#home']").removeAttr('id');
document.querySelectorAll("a.link[href='#about']").removeAttr('id');
document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function services() {
document.querySelectorAll("a.link[href='#services']")[0].setAttribute("id", "services");
document.querySelectorAll("a.link[href='#home']").removeAttr('id');
document.querySelectorAll("a.link[href='#about']").removeAttr('id');
document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function method() {
document.querySelectorAll("a.link[href='#method']")[0].setAttribute("id", "method");
document.querySelectorAll("a.link[href='#home']").removeAttr('id');
document.querySelectorAll("a.link[href='#about']").removeAttr('id');
document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function contact() {
document.querySelectorAll("a.link[href='#contact']")[0].setAttribute("id", "contact");
document.querySelectorAll("a.link[href='#home']").removeAttr('id');
document.querySelectorAll("a.link[href='#about']").removeAttr('id');
document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}/*============== Font ==============*/
/*Raleway*/
@font-face {
font-family: 'Raleway';
src: url(../fonts/font.woff2) format('woff2');
}
/*Icons*/
@font-face {
font-family:'FontAwesome';
src: url('../fonts/iconfont.woff2');
}
/*========= Main Elements ==========*/
/*Html & Body*/
html, body {
font-size: 14px;
width: device-width;
margin: 0 0 0 0;
font-weight: 400;
width: 100%;
font-family: 'Raleway', sans-serif;
}
/*All*/
*,
*:before,
*:after {
box-sizing: border-box;
}
/*Links !a*/
a,
a:hover,
a:active,
a:focus {
text-decoration: none;
outline: none;
}
/*Headers !h1 !h2 !h3 !h4 !h5 !h6*/
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: 'Raleway', sans-serif;
color: #1a1a1a;
margin-bottom: 10px;
}
h1 {
font-size: 3rem;
line-height: 4rem;
}
/*img !img*/
img {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-user-select: none;
-webkit-user-drag: none;
-user-drag: none;
max-width: 100%;
}
/*ul !ul*/
ul {
list-style: none;
}
strong {
font-family: "brandon", brandon, helvetica, sans-serif;
}
article {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 580px;
font-size: 18px;
color: #00D2AD;
margin-bottom: 30px;
}
/*hr !hr*/
hr {
border: solid 1px #e0e0e0;
display: block;
margin-left: 6%;
margin-right: 6%;
}
/*=============== Id ===============*/
#home {
margin-left: 0%;
}
/*Box*/
#box {
width: 100%;
height: 30vw;
margin-top: 1%;
margin-bottom: 2.5%;
background-image: url("../images/blur.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #00D2AD;
}
#box img {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
}
#box h1 {
text-align: center;
}
/*Icon setting*/
div#a > a {
float: right;
font-size: 17px;
margin-top: -1%;
padding-right: 0.8%;
padding-left: 0.8%;
padding-top: 1%;
padding-bottom: 1%;
overflow: hidden;
}
div#a > a:hover {
background-color: white;
color:#00D2AD;
}
/*static-bar*/
#static-bar {
position: fixed;
width: 100%;
top: 0;
left: 0;
text-align: center;
background-color: #00D2AD;
transition: all 3s;
}
#static-bar div#a > a {
float: right;
font-size: 17px;
padding: 27.5px 15px 27.5px 15px;
}
#static-bar nav > ul > li > a {
font-size: 17px;
font-weight: 300;
margin-left: 50px;
color: white;
transition: 0.1s;
}
#static-bar nav > ul > li {
margin-left: 15%;
margin-top: 1.6%;
}
#static-bar div#a > a {
float: right;
font-size: 17px;
}
#static-bar div#a > a:hover {
background-color: white;
color:#00D2AD;
}
#static-bar div#a {
font-family: FontAwesome;
font-style: normal;
font-size: 15px;
}
.static-logo {
margin-top: -0.5%;
margin-left: 1%;
float: left;
width: 60px;
}
/*margin*/
#mrg-c {
margin-left: 200px;
}
#mrg-c img {
margin-left: -500px;
}
#margin {
margin-left: 50px;
margin-right: 65px;
}
#break {
width: 3%;
}
#b-mgr {
margin-bottom: 30px;
}
#mtd {
width: 650px;
}
#bottom-image {
width: 300px;
}
/*Subject header lines*/
#header-lines {
overflow: hidden;
text-align: center;
}
#header-lines h1:before, #header-lines h1:after {
background-color: #e0e0e0;
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 100px;
z-index: -1;
}
#header-lines h1:before {
right: 0.5em;
margin-left: -50%;
}
#header-lines h1:after {
left: 0.5em;
margin-right: -50%;
}
/*============= Class ==============*/
/*static-bar class*/
.view2 {
display: none;
}
.dlines {
padding-top: 10px;
padding-bottom: 10px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
/*url link class*/
.link {
display: block;
position: relative;
top: -80px;
visibility: hidden;
}
/*top-logo*/
.top-logo {
margin-top: 25px;
margin-bottom: 25px;
width: 400px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
/*============= Header =============*/
/*header !section*/
header > section {
overflow: hidden;
background-color: #00D2AD;
height: 46px;
}
header > section > ul > li {
font-family: FontAwesome;
font-style: normal;
font-size: 15px;
}
/*section !a !ul*/
section > ul > li > a {
float: left;
font-size: 15px;
font-weight: 600;
}
section a {
color: white;
}
section > ul {
margin-left: 5%;
}
/*nav !nav !a !target*/
header nav {
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
header nav > ul > li a {
color: #777;
font-weight: 600;
text-align: center;
margin-left: 5%;
}
header nav > ul > li a:target {
color: #00D2AD;
transition: all 0.65s;
}
header span {
margin-left: 0.8vw;
font-family: arial;
}
header a.mail {
margin-left: 4%;
}
/*============== Main ==============*/
/*main*/
main {
margin-left: 6%;
margin-right: 6%;
line-height: 1.5;
}
/*table*/
table {
width: 100%;
border: 0;
margin-bottom: 50px;
}
td {
width: 300px;
}
main span {
font-weight: 1;
font-family: Arial, Helvetica, sans-serif;
}
table a {
color: blue;
}
/*IE10 in Windows 8 and Windows Phone 8 Bug fix*/
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
/*Header icon classes*/
.lang:before {content: "\0045 \004E \0047";}
.mail:before {content:"\f003";}
.phone:before {content:"\f095";}
.twitter:before {content:"\f099";}
.facebook:before {content:"\f09a";}
.google:before {content:"\f0d5";}
.linkedin:before {content:"\f0e1";}
.dribbble:before {content:"\f17d";}
.behance:before {content:"\f1b4";}<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Garbrant Consulting</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/ico" href="assets\images\logo-icon.ico">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="style.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script src="script.js"></script>
<script src="assets/js/scroll.js"></script>
</head>
<body>
<header>
<section>
<ul>
<li>
<a href="tel:012-345 67 89"><span>012-345 67 89</span></a>
<a href="mailto:mail@example.com"><span>mail</span></a>
</li>
</ul>
</section>
<a href="" class="top-logo">
</a>
<a class="link" href="#home"></a>
<a class="selector"></a>
<hr>
<nav>
<ul>
<li>
<a href="#home" onclick="home()">Hem</a>
<a href="#about" onclick="about()">Om</a>
<a href="#services" onclick="services()">Tjänster</a>
<a href="#method" onclick="method()">Metod</a>
<a href="#contact" onclick="contact()">Kontakt</a>
</li>
</ul>
</nav>
<hr id="scroll-to">
</header>
<div id="static-bar" class="view2">
<section id="margin">
<ul>
<li>
</li>
</ul>
</section>
<nav>
<ul>
<li>
<a href="#home" onclick="home()">Hem</a>
<a href="#about" onclick="about()">Om</a>
<a href="#services" onclick="services()">Tjänster</a>
<a href="#method" onclick="method()">Metod</a>
<a href="#contact" onclick="contact()">Kontakt</a>
</li>
</ul>
</nav>
</div>
<br>
<main>
<div id="box">
<br><br>
<img src="assets\images\cik.png">
<h1>Hej</h1>
</div>
<!--About-->
<a class="link" href="#about"></a>
<div id="header-lines">
<h1>Om</h1>
</div>
<table>
<tbody>
<tr>
<article class="selector" href="#about">
<p>Garbrant Consulting är ett konsultföretag som erbjuder tjänster inom mat, dryck och hotell. Garbrant Consulting ägs och drivs av Ulrika Garbrant, civilekonom och projektledare med mångårig branscherfarenhet på strategisk och operativ nivå.</p>
</article>
<td valign="top">
<p>Garbrant Consulting skriver regelbundet artiklar i den internationella branschtidningen Foodservice Europe & Middle East. Garbrant Consulting rapporterar om den Nordiska restaurangmarknaden (Sverige, Norge, Danmark, Finland) med aktuell branschfakta, trender och intervjureportage.<b></a></p>
<p>Garbrant Consulting vänder sig till företag och organisationer inom hotell-, restaurang- och måltids-branschen. Målgruppen består också av företag som på olika sätt har anknytning till mat och dryck, t ex fastighetsbolag, reseföretag, upplevelseföretag, friskvårdsföretag.<br>
Våra tjänster inkluderar konceptutveckling, analyser, strategier, strukturkapital, utbildning mm. <br /><a href="#services"> Läs mer om Tjänster.</a></p>
</td>
<td id="break"></td>
<td valign="top">
<p>Exempel på kundföretag: Scandic Hotels, Mat på Jobbet, Ballbreaker, Fritidsresor, Espresso House, Max Hamburger-restauranger, Medley, 8t8, Convini, Stöten i Sälen m fl.</p>
<p>Vi tror på kombinationen passion, struktur och affärsmässighet för bästa resultat. Garbrant Consulting kan stärka uppdragsgivaren på en eller flera av dessa punkter. <br><a href="#method">Läs mer om Metod.</a></p>
</td>
</tr>
</tbody>
</table>
<!--Services-->
<a class="link" href="#services"></a>
<div id="header-lines">
<h1>Tjänster</h1>
</div>
<table>
<tbody>
<tr>
<article class="selector" href="#services">
<p>Garbrant Consulting erbjuder tjänster inom en rad områden, som rådgivare, projektledare eller resurs i en arbetsgrupp:</p>
</article>
<td valign="top">
<p><strong>Konceptutveckling</strong><br>Ett koncept är en helhet med många beståndsdelar. Garbrant Consulting kan bidra med kreativitet, marknadskännedom, trendkänsla, specialistkunskap och ett strukturerat arbetssätt för att utforma alla detaljer i konceptet. Garbrant Consulting kan även utvärdera befintliga koncept och utforma förbättringsförslag.</p>
<p><strong>Analyser</strong><br>En analys kan vara ett avgränsat projekt, t ex en kvalitetsutvärdering, marknadskartläggning eller trendrapport. Ofta är analysen en del i ett större projekt, t ex en förstudie inför ett strategiarbete eller ett underlag för konceptutveckling.</p>
<p><strong>Strategiarbete</strong><br>Vision, affärsidé, mål, vägval och strategier - Garbrant Consulting kan hjälpa er att skapa en strategisk plan för ert företag, affärsområde eller avdelning. Exempelvis är utvecklingen av en affärsplan en intern process som kan förstärkas och effektiviseras med Garbrant Consultings hjälp. Garbrant Consulting kan också fungera som bollplank och kritisk granskare av föreslagna strategier.</p>
</td>
<td id="break"></td>
<td valign="top">
<p id="b-mgr"><strong>Strukturkapital</strong><br>Ett företags strukturkapital är dess samlade dokumentation av policies, koncept, arbetssätt och rutiner. Syften med att skapa strukturkapital är kvalitetssäkring, effektivisering av processer och daglig drift, konceptsäkring vid expansion, uppföljning av prestationer mm. Ett väl utformat strukturkapital ökar värdet på företaget. Ofta fungerar ett strukturprojekt som en arbets- och utvecklingsprocess då det ibland uppdagas att alla policies, konceptdetaljer och rutiner inte är satta. Därför krävs en erfaren och kvalificerad projektledare för att nå ett bra slutresultat. Exempel på slutprodukter: Konceptbeskrivning, Driftsmanual, Franchisehandbok, Utbildningsprogram.</p>
<p><strong>Artiklar</strong><br>Garbrant Consulting skriver regelbundet artiklar i den internationella branschtidningen Foodservice Europe & Middle East. Garbrant Consulting rapporterar om den Nordiska restaurangmarknaden (Sverige, Norge, Danmark, Finland) med aktuell branschfakta, trender och intervjureportage. Andra skrivuppdrag kan diskuteras.</p>
</td>
</tr>
</tbody>
</table>
<!--Method-->
<a class="link" href="#method"></a>
<div id="header-lines">
<h1>Metod</h1>
</div>
<table>
<tbody>
<tr>
<article class="selector" href="#method"><p>Garbrant Consulting värdesätter ett nära och öppet samarbete med uppdragsgivaren. Tillsammans åstadkommer vi det bästa resultatet.</p></article>
<td valign="top" id="mtd">
<p><strong>Arbetssätt<br></strong>En projektgrupp sätts samman bestående av Garbrant Consulting och en eller flera representanter från ert företag. Roller och ansvarsfördelning bestäms i uppstartfasen. Beroende på uppdragets art och vilka interna resurser som kan tillsättas, väljer ni som uppdragsgivare hur mycket ni deltar. Garbrant Consulting konsult kan anta rollen som projektledare eller producerande resurs i en arbetsgrupp som ni själva tillsatt.</p>
<p>Vi tror på kombinationen passion, struktur och affärsmässighet för bästa resultat. Garbrant Consulting kan stärka uppdragsgivaren på en eller flera av dessa punkter.</p>
<p>Begreppet passion innefattar både kreativitet, kunskap, vilja och drivkraft. Den brukar vara en stark faktor hos entreprenören, som kanske i första hand behöver hjälp med struktur. I en större organisation finns ofta en högre grad av struktur och affärsmässighet men kanske ett behov av en utomståendes drivkraft, kunskap och kreativitet. Ibland är uppdragsgivaren stark på alla tre punkter men saknar helt enkelt tid och interna resurser för ett önskat projekt.</p>
<p><strong>Vad behöver ni hjälp med? </strong><br><a href="#contact">Kontakta oss</a></p>
</td>
<td id="break"></td>
<td valign="top"><img alt="bubblor (passion, struktur, affärsmässighet)" src="assets/images/bubbles.jpg">
</td>
</tr>
</tbody>
</table>
<!--Contact-->
<a class="link" href="#contact"></a>
<div id="header-lines">
<h1>Kontakt</h1>
</div>
<div>
<article class="selector" href="#contact"><p>Välkommen att höra av dig.</p></article>
<p><strong>Har du frågor om Garbrant Consulting och våra tjänster?</strong></p>
<p>
<li>Vill du veta mer eller boka tid för ett möte?</li>
<li>Söker du samarbete?</li>
<li>Vill du diskutera en idé?</li>
</p>
<p><strong>Ulrika Garbrant</strong><br>
Tel: <a href="tel:012-345 67 89"><span>012-345 67 89</span></a><br>
E-post: <a href="mailto:mail@example.com">ulrika@garbrantconsulting.se</a>
</p>
<span><img alt="bild på person" src="assets/images/stand.png" id="bottom-image"></span>
</div>
</main>
</body>
</html>
答案 0 :(得分：0)
由于以下两行，您的JS错误：
var href = $(anchors[i]).attr('href');
location.hash = href.slice(href.indexOf('#') + 1);
<a href="#home">紧邻（下方）的定位标记没有href属性。因此，您的JS在href.slice语句中感到窒息。
要解决此问题，您可能应该合并两个相邻的锚点。
所以更改：
<a class="link" href="#home"></a>
<a class="selector"></a>
收件人：
<a class="selector link" href="#home"></a>
答案 1 :(得分：0)
您的问题是，当您设置位置时，哈希会立即跳转到哈希，而那不是您想要的。 thread是有关更新location.hash而不跳转页面的。
更改您的
location.hash = href
到
if(history.pushState) {
history.pushState(null, null, href);
}
else {
location.hash = href;
}
应该修复它。